<template>
    <div class="container">
        <van-form class="items" v-show="spinner==false" @submit="tijiao" input-align="right">
           <!-- @failed="onFailed" @submit="return false" -->
          <div  v-for="(item,i) in form" :key="i">
            <van-field v-if="item.type=='text'" v-model="item.values" :label="item.fields[0].name" :required="item.need==1" class="item" :placeholder="item.placeholder"/>
            <div class="moreText" v-if="item.type=='textarea'">
              <van-field
                readonly
                :required="item.need==1"
                :label="item.fields[0].name"
                class="title"
              />
              <textarea v-model="item.values"
                rows="2"
                autosize
                type="textarea"
                maxlength="100"
                :placeholder="item.placeholder"
                class="more">
              </textarea>
            </div>
            <van-field v-if="item.type=='caption'" readonly :required="item.need==1" class="item none" :label="item.fields[0].name" input-align="left"/>
            <!-- 允许输入正整数，调起纯数字键盘 -->
            <van-field v-if="item.type=='number'" v-model="item.values" :required="item.need==1" class="item" type="digit" :label="item.unit!=''?item.fields[0].name+'('+item.unit+')':item.fields[0].name" :placeholder="item.placeholder"/>
            <van-field v-if="item.type=='money'" v-model="item.values" :required="item.need==1" class="item" type="number" :label="item.currency!=''?item.fields[0].name+'('+item.currency+')':item.fields[0].name" :placeholder="item.placeholder"/>
            <div class="item" v-if="item.type=='radio'">
              <van-field
                readonly
                :label="item.unit!=''?item.fields[0].name+'('+item.unit+')':item.fields[0].name"
                :value="item.values"
                :required="item.need==1"
                :placeholder="item.placeholder"
                @click="clickRadio(item.options,i)" right-icon="arrow"
              />
              
            </div>
            <div class="item" v-if="item.type=='checkbox'">
              <van-field
                readonly
                :value="item.values"
                :required="item.need==1"
                :label="item.unit!=''?item.fields[0].name+'('+item.unit+')':item.fields[0].name" :placeholder="item.placeholder"
                @click="clickCheck(item.options,i)" right-icon="arrow"
              />
              
            </div>
            <div class="item" v-if="item.type=='date'">
              <van-field
                readonly
                name="calendar"
                :value="item.values"
                :label="item.unit!=''?item.fields[0].name+'('+item.unit+')':item.fields[0].name"
                :required="item.need==1"
                :placeholder="item.placeholder"
                @click="showTime(item.date_type,i,-1)" right-icon="arrow"
              />
            </div>
            <div class="timeBox" v-if="item.type=='datearea'">
              <van-field
                clickable
                readonly
                name="datetimePicker"
                :value="item.values[0]"
                :label="item.fields[0].name?item.fields[0].name:'开始时间'"
                :required="item.need==1"
                :placeholder="item.placeholder"
                @click="showTime(item.date_type,i,0)" right-icon="arrow"
              />
              <van-field
                clickable
                readonly
                name="datetimePicker"
                :value="item.values[1]"
                :required="item.need==1"
                :label="item.fields[1].name?item.fields[1].name:'结束时间'"
                error-message-align="right"
                :placeholder="item.placeholder"
                @click="showTime(item.date_type,i,1)" right-icon="arrow"
              />
              
              <van-field
                clickable
                :readonly="item.is_time_update!=1"
                v-model="item.long_time"
                :required="item.need==1"
                :label="item.date_type==3?item.fields[2].name+'(小时)':item.fields[2].name+'(天)'"
                placeholder="自动计算"
              />
            </div>
            <van-field name="uploader" v-if="item.type=='image'" class="mb20" :required="item.need==1"
                :placeholder="item.placeholder" :label="item.fields[0].name" @click="setPopupIndex(i)">
              <template #input>
                <van-uploader class="mb2340" v-model="item.values" type="button" accept="image/*" :name="i" multiple :before-read="beforeReadImgList" :after-read="afterReadImgList" @before-delete="beforeDeleteImgEvent" @delete="deleteImgEvent" :max-count="10">
                  <!-- <div slot="preview-cover" @click="setPopupIndex(i)" :item="typeOuts">覆盖{{FileListItem}}</div> -->
                </van-uploader>
              </template>
            </van-field>
            <van-field v-if="item.type=='file'" name="uploader" class="mb20" :required="item.need==1"
                :placeholder="item.placeholder" :label="item.fields[0].name" @click="setPopupIndex(i)">
              <template #input>
                <van-uploader v-model="item.values" :accept="allFile" multiple :before-read="beforeReadImgList" :name="i" :after-read="afterReadImgList2" @delete="deleteImgEvent" :max-count="10"/>
              </template>  
             
            </van-field>
            <div v-if="item.type=='address'" class="timeBox borderBottom">
              <van-field
                :required="item.need==1"
                readonly
                value=""
                :label="item.unit!=''?item.fields[0].name+'('+item.unit+')':item.fields[0].name"
              />
              <van-field
                readonly
                clickable
                name="area"
                :value="item.values"
                input-align="left"
                :placeholder="item.placeholder"
                @click="showArea = true,popupIndex=i"
                right-icon="arrow"
                class="borderBottom"
              />
              <van-field
                name="validatorDetail"
                v-if="item.address==1"
                :required="item.need2==1"
                v-model="item.detail"
                input-align="left"
                :placeholder="item.address_msg"
              />
              
            </div>
            <div class="lianxi" v-if="item.type=='contact'">
              <van-field  readonly class="item mb0" :required="item.need==1"
               :label="item.fields[0].name"/>
              <div class="ul">
                <div class="li" v-show="item.values.length>0" v-for="(it,idx) in item.values" :key="idx">
                  <div class="left">
                    <img :src="it.photo?it.photo:header" class="img" />
                    <div class="name">{{it.username}}</div>
                    <van-icon name="cross" color="#ccc" size="10px" class="closed" @click="delContactItem(i,idx)"/>
                  </div>
                </div>
                <div class="li" v-show="!item.values.length">
                  <div class="left">
                    <div class="img add" @click="contactOne(i)">
                        <van-icon name="plus" color="#ccc" size="25px"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 控件组 -->
            <div class="timeBox" @click.stop="popupIndex=i" v-if="item.type=='holiday'||item.type=='overtime'||item.type=='goout'">
              <van-field v-if="item.type=='holiday'" readonly clickable class="item mb0" :value="holidayType" :required="item.need==1" placeholder="请选择" :label="travelNames[0]"  @click="showHolidayTypes = true,popupIndex=i" right-icon="arrow"/>
              <van-popup v-model="showHolidayTypes" position="bottom">
                <van-picker
                  :title="travelNames[0]"
                  show-toolbar
                  :columns="item.holiday_types"
                  @cancel="showHolidayTypes=false"
                  @confirm="onConfirmHolidayTypes"
                />
              </van-popup>
              <van-field v-if="item.type=='overtime'&&travelNames[0]!='外出类型不显示'" readonly clickable class="item mb0" :value="overTimeType" :required="item.need==1" placeholder="请选择" :label="travelNames[0]"  @click="showOverTimeTypes = true,popupIndex=i" right-icon="arrow"/>
              <van-popup v-model="showOverTimeTypes" position="bottom">
                <van-picker
                  :title="travelNames[0]"
                  show-toolbar
                  :columns="item.overtime_types"
                  @cancel="showOverTimeTypes=false"
                  @confirm="onConfirmOverTimeTypes"
                />
              </van-popup>
              <van-field v-if="item.type=='goout'&&travelNames[0]!='外出类型不显示'" readonly clickable class="item mb0" :value="typeOut" :required="item.need==1" placeholder="请选择" :label="travelNames[0]"  @click="showTypeOuts = true,popupIndex=i" right-icon="arrow"/>
              <van-popup v-model="showTypeOuts" position="bottom">
                <van-picker
                  :title="travelNames[0]"
                  show-toolbar
                  :columns="item.goout_types"
                  @cancel="showTypeOuts=false"
                  @confirm="onConfirmTypeOuts"
                />
              </van-popup>
              <van-field
                clickable
                readonly
                name="datetimePicker"
                :value="item.values[0]"
                :label="travelNames[1]"
                :required="item.need==1"
                placeholder="请选择"
                @click="showTime(item.date_type,i,0,'datearea')" right-icon="arrow"
              />
              <van-field
                clickable
                readonly
                name="datetimePicker"
                :value="item.values[1]"
                :required="item.need==1"
                :label="travelNames[2]"
                error-message-align="right"
                placeholder="请选择"
                @click="showTime(item.date_type,i,1,'datearea')" right-icon="arrow"
              />
              
              <div class="timeBox table" v-show="item.info&&item.info.length>1">
                <!-- <div class="tableTitle">为方便统计，请填写每日加班时长</div> -->
                <table width="100%" align="center" cellspacing="0px" border="1px" border-color="#999" id="tbl">
                  <thead>
                    <tr>
                      <td>加班时间</td>
                      <td>加班时长{{item.date_type==3?'(小时)':'(天)'}}</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="tableItem" v-for="(it2,index2) in item.info" :key="index2">
                      <td>{{it2.date}}</td>
                      <td class="ipt">
                        <van-field readonly v-model="it2.ours" type="number" input-align="center"/>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              
              <van-field
                v-show="groupType!=3"
                :readonly="item.is_time_update!=1"
                clickable
                v-model="item.long_time"
                :required="item.need==1"
                :label="item.date_type==3?travelNames[3]+'(小时)':travelNames[3]+'(天)'"
                placeholder="自动计算"
              />
              <van-field
                :readonly="item.is_time_update!=1"
                v-show="groupType==3&&!item.info"
                clickable
                v-model="item.long_time"
                :required="item.need==1"
                :label="item.date_type==3?travelNames[3]+'(小时)':travelNames[3]+'(天)'"
                placeholder="自动计算"
              />
              <van-field
                :readonly="item.is_time_update!=1"
                v-show="groupType==3&&item.info&&item.info.length>1"
                clickable
                v-model="selfOverTime"
                :required="item.need==1"
                :label="item.date_type==3?travelNames[3]+'(小时)':travelNames[3]+'(天)'"
                placeholder="自动计算"
              />
              <van-field
                :readonly="item.is_time_update!=1"
                v-show="groupType==3&&item.info&&item.info.length<=1"
                clickable
                v-model="item.long_time"
                :required="item.need==1"
                :label="item.date_type==3?travelNames[3]+'(小时)':travelNames[3]+'(天)'"
                placeholder="自动计算"
              />
              <div class="moreText">
                <van-field
                  readonly
                  :required="item.need_msg==1"
                  :label="travelNames[4]"
                  class="title"
                />
                <textarea v-model="reason"
                  rows="2"
                  autosize
                  type="textarea"
                  maxlength="100"
                  :placeholder="item.placeholder"
                  class="more">
                </textarea>
              </div>
              <van-field v-if="item.type=='goout'" name="uploader" class="mb20" :label="travelNames[5]">
                <template #input>
                  <van-uploader v-model="imgList1" multiple :before-read="beforeReadImgList" :after-read="afterReadImgList1"  @delete="deleteImgEvent1" :max-count="10"/>
                </template>
              </van-field>
            </div>
            <div class="travel" v-if="item.type=='travel'">
              <div class="timeBox mb0" @click.stop="itemIndex=id" v-for="(it,id) in travelList" :key="id">
                <van-field
                  clickable
                  readonly
                  name="datetimePicker"
                  :value="it.currentTimeStart10"
                  
                  :label="travelNames[0]"
                  :required="item.need==1"
                  placeholder="请选择"
                  @click="showTime(item.date_type,i,0)" right-icon="arrow"
                />
                <van-field
                  clickable
                  readonly
                  name="datetimePicker"
                  :value="it.currentTimeEnd10"
                  :required="item.need==1"
                  :label="travelNames[1]"
                  error-message-align="right"
                  placeholder="请选择"
                  @click="showTime(item.date_type,i,1)" right-icon="arrow"
                />
                <van-field
                  :readonly="it.is_time_update!=1"
                  clickable
                  v-model="it.computedDay10"
                  :required="item.need==1"
                  :label="item.date_type==3?travelNames[2]+'(小时)':travelNames[2]+'(天)'"
                  placeholder="自动计算"
                />
                <van-field readonly clickable class="item mb0" :value="it.startingCity" :required="item.need==1" placeholder="请选择" :label="travelNames[3]"  @click="changeStartCity(1,i)" right-icon="arrow"/>
                <van-field readonly clickable class="item mb0" :value="it.endingCity" :required="item.need==1" placeholder="请选择" :label="travelNames[4]"  @click="changeStartCity(2,i)" right-icon="arrow"/>
                <van-field readonly clickable class="item mb0" :value="it.vehicle" :required="item.need==1" placeholder="请选择" :label="travelNames[5]"  @click="showVehicles = true" right-icon="arrow"/>
                <van-popup v-model="showVehicles" position="bottom">
                    <van-picker
                      :title="travelNames[5]"
                      show-toolbar
                      :columns="it.vehicles"
                      @cancel="showVehicles=false"
                      @confirm="onConfirmVehicles"
                    />
                </van-popup>
                <van-field readonly clickable class="item mb0" :value="it.roundTrip" :required="item.need==1" :placeholder="item.placeholder" :label="travelNames[6]"  @click="showRoundTrips = true" right-icon="arrow"/>
                <van-popup v-model="showRoundTrips" position="bottom">
                    <van-picker
                      :title="travelNames[6]"
                      show-toolbar
                      :columns="it.roundTrips"
                      @cancel="showRoundTrips=false"
                      @confirm="onConfirmRoundTrips"
                    />
                </van-popup>
                <div class="moreText">
                  <van-field
                    readonly
                    :required="item.need_msg==1"
                    :label="travelNames[7]"
                    class="title"
                  />
                  <textarea v-model="it.reason10"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="100"
                    :placeholder="item.placeholder"
                    class="more">
                  </textarea>
                </div>
                <van-icon v-show="id!=0" @click="sub(id,i)" name="close itemClose"/>
              </div>
              <div class="item addItem mb0" @click="addItem(i)">+添加行程</div>
              <van-field
                clickable
                :readonly="item.is_time_update!=1"
                v-model="computedDay11"
                :required="item.need==1"
                :label="item.date_type==3?travelNames[8]+'(小时)':travelNames[8]+'(天)'"
                placeholder="自动计算"
              />
              <van-field v-model="reason11" :label="travelNames[9]" :required="item.need==1" :placeholder="item.placeholder"/>
              <van-field v-model="travelPartner" :label="travelNames[10]" class="item" :placeholder="item.placeholder"/>
            </div>
            
            
          </div>
          <!-- 弹框组件 -->
          <div class="poupList">
            <van-popup
              v-model="showRadio"
              closeable
              position="bottom"
              class="radioGroup"
              @opened="endAnimation=true"
              @close="endAnimation=false"
            >
              <div class="radioTitle">
                单选
              </div>
              <van-radio-group v-model="radio" >
                <van-cell-group :class="{scrollBox:overShowItem}">
                  <van-cell :title="it" clickable @click="confirmRadio(it)" v-for="(it,idx) in radioItems" :key="idx">
                    <template #right-icon>
                      <van-radio :name="it" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </van-popup>
            <van-popup
              v-model="showCheckbox"
              
              position="bottom"
              class="radioGroup checkBox1"
              @opened="endAnimation=true"
              @close="endAnimation=false"
            >
              <div class="radioTitle">
                多选
              </div>
              <van-checkbox-group v-model="checkbox" >
                <van-cell-group :class="{scrollBox:overShowItem}">
                  <van-cell
                    v-for="(item, index) in checkboxList"
                    clickable
                    :key="item"
                    :title="`${item}`"
                    @click="toggle(index)" 
                  >
                    <template #right-icon>
                      <van-checkbox :name="item" ref="checkboxes" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-checkbox-group>
              <div class="bottom" v-show="endAnimation==true">
                <div class="li">
                  <div class="btn" @click="showCheckbox=false">取消</div>
                </div>
                <div class="li">
                  <div class="btn queding"  @click="checkBoxConfirm">确定</div>
                </div>
              </div> 
            </van-popup>
            <van-popup v-model="showArea" position="bottom">
              <van-area
                :area-list="areaList"
                @confirm="onConfirm12"
                @cancel="showArea = false"
              />
            </van-popup>
            <!-- 日期类弹窗 -->
            <van-popup v-model="showTimePickerDay" position="bottom">
              <van-datetime-picker
                v-model="currentTime"
                name="validatorDetail"
                :type="dateType"
                :title="title"
                error-message-align="right"
                @confirm="onConfirmDate"
                
                @cancel="showTimePickerDay = false"
              />
            </van-popup>
            <datetime confirm-text="确认" cancel-text="取消" v-show="false" :show="showTimePickerDayA" :clear-text="title" format="YYYY-MM-DD A" v-model="currentTime1" @on-confirm="onConfirmDateA" @on-change="onChangeTimeA" @on-cancel="showTimePickerDayA = false">
              
            </datetime>
          </div>
          
          <div class="approvalProcessList1" v-show="personList!=''">
            <div class="approvalProcessTitle1">审批流程</div>
            <div class="itemOne">
              <!-- <div class="left"></div> -->
              <div class="right">
                <div class="rightTitle">
                  <span class="circle"></span>
                  发起
                </div>
                <div class="box" :class="{togger:isActive}">
                  <div class="itemTitle" @click="isActive=!isActive">
                    <span>抄送{{start_send_ids.length>0?start_send_ids.length:0}}人</span>
                    <van-icon v-show="start_send_ids.length>0" name="play" class="icon"/>
                  </div>
                  <div class="ul">
                    <div class="li" v-for="(item1,index1) in start_send_ids" :key="index1">
                      <img :src="item1.photo?item1.photo:header" alt="">
                      <div class="name">{{item1.username}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right" v-for="(item,index) in personList.reviews" :key="index">
                <div class="rightTitle" v-show="item.apply_status==1">
                  <span class="circle"></span>
                  <span v-show="item.review_user_ids.type==1" class="shenpi star">*</span>
                  审批
                </div>
                <div class="box" v-show="item.apply_status==1&&item.review_user_ids.user_ids.length>=0">
                  <div class="itemTitle">
                    <span v-show="item.review_type==1">需审批人依次同意</span>
                    <span v-show="item.review_type==2">需所有审批人同意</span>
                    <span v-show="item.review_type==3">一人通过即可</span>
                  </div>
                  <div class="ul">
                    <div class="li" :class="{mr24:item.review_type==1,lastarrow:idx==item.review_user_ids.values.length-1}" v-for="(it,idx) in item.review_user_ids.values" :key="idx">
                      <img :src="it.photo?it.photo:header" alt="">
                      <div class="name">{{it.username}}</div>
                      <van-icon name="close" v-show="item.review_user_ids.type==1" color="#666" size="16px" class="closed" @click="delItem(index,idx)"/>
                      <van-icon v-show="item.review_type==1" name="down" color="#999" size="16px" class="arrow"/>
                    </div>
                    <!-- <van-icon v-for="(it,idx) in item.review_user_ids.values" :key="idx" name="down" color="#999" size="20px" class="add arrow"/> -->
                    <van-icon name="add-o" color="#999" size="26px"  class="add" v-show="item.review_user_ids.type==1" @click="changeItem(item.review_user_ids.user_ids,index)"/>
                  </div>
                </div>
                <div class="box" :class="{togger:item.send_user_ids.isActive1}" v-show="item.apply_status==1&&item.send_user_ids.user_ids.length>=0">
                  <div class="itemTitle" @click="item.send_user_ids.isActive1=!item.send_user_ids.isActive1">
                    <span>抄送{{item.send_user_ids.values.length>0?item.send_user_ids.values.length:0}}人</span>
                    <van-icon v-show="item.send_user_ids.values.length>0" name="play" class="icon"/>
                  </div>
                  <div class="ul" v-show="item.send_user_ids.values.length>0">
                    <div class="li" v-for="(it,idx) in item.send_user_ids.values" :key="idx">
                      <img :src="it.photo?it.photo:header" alt="">
                      <div class="name">{{it.username}}</div>
                      <van-icon name="close" v-show="item.send_user_ids.type==1" color="#666" size="16px" class="closed" @click="delItem(index,idx,'send_user_ids')"/>
                    </div>
                    <van-icon name="add-o" color="#999" size="26px"  class="add" v-show="item.send_user_ids.type==1" @click="changeItem(item.send_user_ids.user_ids,index,'send_user_ids')"/>
                  </div>
                </div>
                <div class="rightTitle" v-show="item.apply_status==2">
                  <span class="circle"></span>
                  自动通过
                </div>
                <div class="rightTitle" v-show="item.apply_status==3">
                  <span class="circle red"></span>
                  自动拒绝
                </div>
              </div>
              <div class="right">
                <div class="rightTitle">
                  <span class="circle"></span>
                  结束
                </div>
                <div class="box" :class="{togger:isActive1}">
                  <div class="itemTitle" @click="isActive1=!isActive1">
                    <span>抄送{{end_send_ids.length>0?end_send_ids.length:0}}人</span>
                    <van-icon v-show="end_send_ids.length>0" name="play" class="icon"/>
                  </div>
                  <div class="ul">
                    <div class="li" v-for="(item1,index1) in end_send_ids" :key="index1">
                      <img :src="item1.photo?item1.photo:header" alt="">
                      <div class="name">{{item1.username}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
          </div>

          <div class="btn_box">
            <div class="left" @click="toDetail">
              <img :src="recordImg" alt="">
              <div class="name">查看记录</div>
            </div>
            <div class="right" @click="onSubmit">提 交</div>
          </div>
        </van-form>
        
        <van-popup
          v-model="spinner"
          position="center"
          class="loading"
        >
          <van-loading type="spinner" color="#1989fa" size="40"/>
        </van-popup>
    </div>
</template>
<script>
import _ from 'lodash'
import { Toast } from 'vant';
// import { Datetime } from 'vux'
import moment from 'moment'
// import areaList  from '../assets/areaList.js';
import ApprovalProcess from '../components/approvalProcess.vue'
import Datetime from 'vux/src/components/datetime'
import $ from 'jquery'
export default {
  data() {
    return {
      allFile:"text/csv,application/msword,application/msword,application/json,application/pdf,application/vnd.ms-powerpoint,text/plain,application/vnd.ms-works,application/vnd.ms-excel,application/vnd.ms-excel,aplication/zip,*.zip,.zip,.pdf,.csv,.doc,.dot,.dtd,.json,.wps,.xls,.xlsx,.jar",
      // allFile:"text/csv,application/msword,application/msword,application/json,audio/*, video/*,application/pdf,application/vnd.ms-powerpoint,text/plain,application/vnd.ms-works,application/vnd.ms-excel,application/vnd.ms-excel,aplication/zip,*.zip,.zip,.pdf,.csv,.doc,.dot,.dtd,.json,.wps,.xls,.xlsx,.jar",
      // noProcess:false,//审批流程条件控件是否存在
      is_send_user_ids:false,//审批流程添加审批成员为false 抄送成员为true
      duration:-1,//请假控件余额
      disabled:false,//否不开启假期余额判断
      isActive:true,//审批流程开始抄送人展开或收起
      isActive1:true,//审批流程结束抄送人展开或收起
      isClickSubmit:false,
      isAndroid:false,
      isIOS:false,
      baseUrl:'http://test.api.officelinking.com/index.php/',
      spinner:true,
      //总表数据
      form:[],
      popupIndex:0,//哪一项
      //单选框
      endAnimation:false,//动画结束
      overShowItem:false,//单选或者多选超过9项样式标题固定
      showRadio:false,
      radioItems:['1','2'],
      radio: '',
      //多选框
      checkboxList: ['a', 'b'],
      showCheckbox:false,
      checkbox: [],
      result: [],
      imgList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
      fileList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
      uploadImgNum:0,//格式错误上传图片数量
      address: '',
      showArea: false,
      areaList: '', // 数据格式见 Area 组件文档
      date: '',
      showCalendar: false,
      //时间控件
      // minDate: '',
      // maxDate: new Date(2025, 10, 1)+'',
      showPickerStart: false,
      currentTimeStart: '',
      currentTimeEnd: '',
      // computedDay:'',
      showPickerEnd: false,
      title:"请选择时间",
      showTimePickerDay:false,
      showTimePickerDayA:false,
      dateType:1,
      datearea:'',//datearea是时间区间，空不是
      currentTime:new Date(),
      currentTime1:'',//上午下午
      timeItem:-1,//时间控件里面第几项
      // 假期控件组
      groupTimeType:0,//假期控件时间类型
      groupType:0,//控件组类型 1请假2出差3加班6外出
      currentTimeStart1: '',
      currentTimeEnd1: '',
      computedDay1:'',
      showPickerStart1: false,
      showPickerEnd1: false,
      holidayType:'',//假期类型
      // holidayTypes:['事假', '病假', '产假', '婚假'],//假期类型
      holidayTypes:[
        {
          text:'事假',
          holiday_id:57,
          unit:2,
          date_type:2
        },
        {
          text:'病假',
          holiday_id:58,
          unit:1,
          date_type:3
        },
        {
          text:'产假',
          holiday_id:73,
          unit:3,
          date_type:1
        },
        {
          text:'婚假',
          holiday_id:76,
          unit:2,
          date_type:3
        },
       ],//假期类型
      showHolidayTypes:false,
      overTimeType:'',//加班类型
      overTimeTypes:['临时加班', '紧急任务', '需求排期紧'],//加班类型
      showOverTimeTypes:false,
      typeOut:'',//外出类型
      typeOuts:['出差', '办事', '实施', '安装'],//外出类型
      showTypeOuts:false,
      reason:'',
      imgList1: [],//外出上传绑定图片
      goOutImg: [],//外出上传图片
      //出差控件
      travelDateType:0,
      travelList:[
        {
          currentTimeStart10: '',
          currentTimeEnd10: '',
          computedDay10:'',
          startingCity:"",
          startingCityId:"",
          endingCity:"",
          endingCityId:"",
          vehicle:'',//交通工具
          vehicles:['飞机', '火车', '汽车', '其他'],//交通工具
          roundTrip:'',//往返
          roundTrips:['单程', '往返'],//往返
          reason10:'',
          is_time_update:0
        },
      ],
      showVehicles:false,
      showRoundTrips:false,
      startCity:0,//出差选择城市1出发地地2目的地
      computedDay12:'',
      reason11:'',
      travelPartner:'',
      travelNames:[],
    
      unit:'',
      contacts:'',
      // 联系人
      isContactOne:false,

      addressDetail:'',
      //ios传递的参数
      token:"",
      cid:"",
      form_id:"",
      //审批数组
      personList:'',
      changePersonList:[],
      chooseIndex:0,
      start_send_ids:[],
      end_send_ids:[],
      // changeReviews:[],//审批人选择后回传的id
      header:require('../assets/header.png'),
      recordImg:require('../assets/record.png'),
      holiday_id:'',//请假id
    };
  },
  components: {
    // Radio1,
    ApprovalProcess,
    Datetime,  
  },
  computed: {
    computedDay11:{   //购物车与checked数量一致时，全选为true
      get(){
        let day=0
        this.travelList.forEach(v => {
          console.log(v)
          if(v.computedDay10>0){
            day+=Number(v.computedDay10)
          }
        });
        
        if(day>0){
          return day
        }else{
          return ''
        }   
      },
      set(val){
      },
    },
    selfOverTime:{   //加班自己填写的总时长
      get(){
        let day=0
        if(!this.form[this.popupIndex].info) return
        this.form[this.popupIndex].info.forEach(v => {
          console.log('selfOverTime-v',v)
          day+=Number(v.value)
        });
        if(day>0){
          return day
        }else{
          return ''
        }   
      },
      set(val){
      },
    },
    copyReviews(){
      return this.personList.reviews
    }
  },
  watch: {
    // 对象中的属性值发生变化时触发
    form:{
      handler:'watchProcess',
      // handler(newVal,oldVal) {
        
      // },
      deep: true,// 深度监听，监听到更深层级值的变化
      // immediate: true
    }
  },
  async created () {
    window.alert = function(name){
      var iframe = document.createElement("IFRAME");
      iframe.style.display="none";
      iframe.setAttribute("src", 'data:text/plain,');
      document.documentElement.appendChild(iframe);
      window.frames[0].window.alert(name);
      iframe.parentNode.removeChild(iframe);
    }
    
    let userAgent = navigator.userAgent;
    this.isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
    this.isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    window["getInfo"] = res => {
      this.getInfo(res);
    };
    window["addUsers"] = res => {
      this.addUsers(res);
    };
    window["submitSuccess"] = res => {
      this.submitSuccess(res);
    };
    // console.log('./assets/es6.js1')
    this.getAreasH5()
    if(process.env.NODE_ENV === 'production'){
      console.log('233')
      //app传token 
      this.getUserInfo()
    }else{
       //富银的token
      // this.getInfo({token:'d3jgitIZhI8A8JKy4ob1YJlrIMwz1KYX2QvO5xSs841M6VdJZ7AGm1eRuIeEtRu0',cid:947,form_id:92});
      this.getInfo({token:'d3jgitIZhI8A8JKy4ob1YJlrIMwz1KYX2QvO5xSs841M6VdJZ7AGm1eRuIeEtRu0',cid:947,form_id:334});//320加班显示问题
      //假期195 234 244/139/191加班有類型140 不關聯201 出差141外出無類型200 235、226 外出有類型196 198無控件225 291测试图片附件 299查地址提交编码 253请假多选滚动 268加班无类型 264直接通过265直接拒绝 详细地址284 280/289没有审批流程触发条件 273漏掉审批抄送人293图片附件上传有问题
    }
  },
  // beforeDestroy () {
  //   this.showToast('请检查手机是否内存不足！')
  // },
  methods: {
    // 监听数据获取审批流程
    watchProcess(){
      let form_data={}
        for (var key in this.form) {
          let name = key;         
          let value = this.form[key];
          if(value.type=='number'||value.type=='money'||value.type=='radio'){
            if(value.need==1&&!value.values){
              return
            }
            form_data[value.fields[0].key]=value.values
            
          }
          else if(value.type=='checkbox'){
            if(value.need==1&&!value.values){
              return
            }
            form_data[value.fields[0].key]=value.values.split(',')
          }
          else if(value.type=='datearea'){
            if(value.need==1){
              if(!value.values[0]||!value.values[1]||value.values.length<2){
                return
              }
              form_data[value.fields[0].key]=value.values[0].replace(/[/]/g,'-')
              form_data[value.fields[1].key]=value.values[1].replace(/[/]/g,'-')
              form_data[value.fields[2].key]=value.long_time
            } 
            // console.log('watch-form_data1',form_data)
          }
          else if(value.type=='address'){
            if(value.need==1&&!value.values){
              return
            }else if(value.address==1&&value.need2==1&&!value.detail){
              return
            }
            form_data[value.fields[0].key]=value.city
            // form_data[value.fields[0].key]=value.values
            if(value.address==1){
              form_data[value.fields[1].key]=value.detail
            }
          }
          else if(value.type=='holiday'){
            if(value.need==1){
              if(!this.holiday_id||!value.holiday_msg||value.holiday_msg==1){
                return
              }else if(!value.long_time){
                return
              }
              form_data[value.fields[0].key]=Number(this.holiday_id)
              form_data[value.fields[1].key]=value.values[0].replace(/[/]/g,'-')
              form_data[value.fields[2].key]=value.values[1].replace(/[/]/g,'-')
              form_data[value.fields[3].key]=value.long_time
              form_data['date_type']=value.date_type
            } 
          }
          else if(value.type=='overtime'){
            if(value.need==1){
              console.log('overtime',value.info.length,!value.info.length)
              if(this.travelNames[0]!='外出类型不显示'&&!value.holiday_msg||value.holiday_msg==1){
                return
              }else if(!value.info.length&&!value.long_time){
                return
              }else if(value.info.length&&value.info.length>0&&!this.selfOverTime){
                return
              }
              console.log('外出类型不显示',this.travelNames[0]=="外出类型不显示",this.travelNames)
              if(this.travelNames[0]=="外出类型不显示"){
                form_data[value.fields[0].key]=value.values[0].replace(/[/]/g,'-')
                form_data[value.fields[1].key]=value.values[1].replace(/[/]/g,'-')
                form_data['date_type']=value.date_type
                // form_data[value.fields[2].key]=value.long_time
                if(!value.info.length&&value.long_time){
                  form_data[value.fields[2].key]=value.long_time
                }else if(value.info.length&&value.info.length>0&&this.selfOverTime){
                  form_data[value.fields[2].key]=this.selfOverTime
                }
              }else{
                form_data[value.fields[0].key]=value.holiday_msg
                form_data[value.fields[1].key]=value.values[0].replace(/[/]/g,'-')
                form_data[value.fields[2].key]=value.values[1].replace(/[/]/g,'-')
                form_data['date_type']=value.date_type
                // form_data[value.fields[3].key]=value.long_time
                if(!value.info.length&&value.long_time){
                  form_data[value.fields[3].key]=value.long_time
                }else if(value.info.length&&value.info.length>0&&this.selfOverTime){
                  form_data[value.fields[3].key]=this.selfOverTime
                }
              }
            } 
          }
          else if(value.type=='goout'){
            if(value.need==1){
              if(this.travelNames[0]!='外出类型不显示'&&!value.holiday_msg||value.holiday_msg==1){
                return
              }else if(!value.long_time){
                return
              }
              if(this.travelNames[0]=="外出类型不显示"){
                form_data[value.fields[0].key]=value.values[0].replace(/[/]/g,'-')
                form_data[value.fields[1].key]=value.values[1].replace(/[/]/g,'-')
                form_data[value.fields[2].key]=value.long_time
                form_data['date_type']=value.date_type
              }else{
                form_data[value.fields[0].key]=value.holiday_msg
                form_data[value.fields[1].key]=value.values[0].replace(/[/]/g,'-')
                form_data[value.fields[2].key]=value.values[1].replace(/[/]/g,'-')
                form_data[value.fields[3].key]=value.long_time
                form_data['date_type']=value.date_type
              }
              
            } 
          }

          else if(value.type=='travel'){
            let data=[]
            // let travelListCopy=JSON.parse(JSON.stringify(this.travelList))
            let travelListCopy=this.travelList
            // let data2=JSON.parse(JSON.stringify(data1))
            for (let index = 0; index < travelListCopy.length; index++) {
              var v = travelListCopy[index];
              if(value.need==1){
                if(!v.currentTimeStart10){
                  return
                }else if(!v.currentTimeEnd10){
                  return
                }else if(!v.computedDay10){
                  return
                }else if(!v.startingCity){
                  return
                }else if(!v.endingCity){
                  return
                }else if(!v.vehicle){
                  return
                }
              }
              let data1={
                departure:'',//出发地
                destination:'',//目的地
                transportation:'',
              }
              data1.start_time=v.currentTimeStart10.replace(/[/]/g,'-')
              data1.end_time=v.currentTimeEnd10.replace(/[/]/g,'-')
              data1.travel_length=v.computedDay10
              data1.departure=v.startingCityId
              data1.destination=v.endingCityId
              // data1.departure=v.startingCity
              // data1.destination=v.endingCity
              data1.transportation=v.vehicle
              this.$set(data,index,data1)
            }
            
            if(value.need==1){
              if(!this.computedDay11){
                // this.showToast(this.travelNames[8]+'不能为空！')
                return
              }
            } 
            form_data[value.fields[8].key]=this.computedDay11
            form_data['data']=data
            form_data['date_type']=value.date_type
            console.log('出差数组',data)
          }
        }
        console.log('watch-form_data',form_data)
        let data100={
          cid:this.cid,
          form_id:this.form_id,
          form_data
        }
        this.getProcess(data100)
    },
    // 处理ios不弹toast问题
    showToast(msg){
      if(this.isAndroid){
        this.$toast(msg)   
      }else if(this.isIOS){
        console.log('调用showPorgressHUD')
        window.webkit.messageHandlers.showPorgressHUD.postMessage(msg);
      }else{
        this.$toast(msg)
      }
    },
    //单选框方法
    clickRadio(options,i){
      console.log('clickRadio',options,i)
      if(options.length>9){
        this.overShowItem=true
      }else{
        this.overShowItem=false
      }
      this.popupIndex=i;
      this.radioItems=options;
      this.radio=this.form[i].values
      this.showRadio=true
    },
    confirmRadio(item){
      console.log('confirmRadio',item)
      this.form[this.popupIndex].values=item
      this.showRadio=false
    },
    //多选框方法
    clickCheck(options,i){
      console.log('clickCheck',options,i)
      if(options.length>8){
        this.overShowItem=true
      }else{
        this.overShowItem=false
      }
      this.popupIndex=i;
      if(this.form[i].values==''){
        this.checkbox=[]
      }else{
        this.checkbox=this.form[i].values.split(',')
      }
      this.checkboxList=options
      this.showCheckbox=true
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    checkBoxConfirm(){
      console.log('checkbox',this.checkbox,this.popupIndex)
      this.form[this.popupIndex].values=this.checkbox.join(',')
      this.showCheckbox=false;
    },
    
    //地址选择
    onConfirm12(values) {
      console.log('dizhivalues',values,values[2].code)
      let data=values.map((item) => item.name).join('/');
      if(this.startCity==1){
        this.travelList[this.itemIndex].startingCity=data
        this.travelList[this.itemIndex].startingCityId=values[2].code
        this.form[this.popupIndex].departure=data
        this.startCity=0
        this.showArea = false;
        console.log('地址this.form[this.popupIndex]',this.form[this.popupIndex])
        return
      }else if(this.startCity==2){
        this.travelList[this.itemIndex].endingCity=data
        this.travelList[this.itemIndex].endingCityId=values[2].code
        this.form[this.popupIndex].destination=data
        this.startCity=0
        this.showArea = false;
        console.log('地址2this.form[this.popupIndex]',this.form[this.popupIndex])
        return
      }
      // this.address = values.map((item) => item.name).join('/');
      this.form[this.popupIndex].values=data
      this.form[this.popupIndex].city=values[2].code
      this.startCity=0
      this.showArea = false;
      
    },
    //时间选择
    showTime(type,i,timeItem,datearea){
      // console.log('this.disabled=',this.groupType,this.disabled)
      // if(this.groupType==1&&this.disabled==true){
      //   this.showToast('假期余额不足！')
      //   return
      // }
      // type时间类型年月日,i表单第几项,timeType时间控件类型,timeItem控件里面第几项 datearea是日期区间
      if(datearea=='datearea'){
        this.datearea=datearea
      }else{
        this.datearea=''
      }
      console.log('type',type,i,timeItem,this.form,this.currentTime,)
      console.log('this.currentTime',this.currentTime,this.currentTime1,)
      this.popupIndex=i;
      if(type==1){
        this.dateType = 'date'
        // this.currentTime=new Date()
      }else if(type==3){
        this.dateType='datetime'
        // this.currentTime=new Date()
      }else{
        this.dateType = 'dateareaAM'
        // this.currentTime=''
        this.timeItem=timeItem
        console.log('timeItem',this.timeItem)
        this.showTimePickerDayA = true
        return
      }
      this.timeItem=timeItem
      console.log('timeItem',this.timeItem)
      console.log('showTime-currentTime',this.currentTime,this.currentTime1)
      this.showTimePickerDay = true
    },
    //选择审批人数据回传
    changeItem(user_ids,chooseIndex,send_user_ids){
      if(send_user_ids=='send_user_ids'){
        this.is_send_user_ids=true
      }else{
        this.is_send_user_ids=false
      }
      //send_user_ids是审批项抄送人
      console.log('changeItem',user_ids,chooseIndex)
      this.chooseIndex=chooseIndex
      let data=JSON.stringify(user_ids)
      // this.changeReviews[chooseIndex]=user_ids
      // console.log('changeReviews',this.changeReviews)
      this.getToContacts(data)
    },
    //删除审批人数据回传
    delItem(chooseIndex,index,send_user_ids){
      //send_user_ids是审批项抄送人
      console.log('delItem',chooseIndex,index)
      console.log('this.personList.reviews[this.chooseIndex].review_user_ids.values',this.personList.reviews[chooseIndex].review_user_ids.values)
      if(send_user_ids=='send_user_ids'){
        this.personList.reviews[chooseIndex].send_user_ids.values.splice(index,1)
      }else{
        this.personList.reviews[chooseIndex].review_user_ids.values.splice(index,1)
      }
      // this.personList.reviews[chooseIndex].review_user_ids.values=[...arr]
      console.log('this.personList.reviews[this.chooseIndex].review_user_ids.values22',this.personList.reviews[chooseIndex].review_user_ids.values)
      this.$forceUpdate();
    },
    //出差控件选择目的地
    changeStartCity(startCity,i){
      this.showArea = true
      this.popupIndex=i,
      this.startCity=startCity
    },
    
    getUserInfo(){
      
      if(this.isAndroid){
        window.android.loadingInfo();       
      }else if(this.isIOS){
        console.log('调用iosloadingInfo')
        window.webkit.messageHandlers.loadingInfo.postMessage(null);
        // this.getInfo({token:'deHWIRDPaYMDAxN7d2/OZop+yq/Qc53GZTo0SSItJleuCn5iOU7ejz3tze11ucnz',cid:1182,form_id:52});
      }else{
        this.getInfo({token:'deHWIRDPaYMDAxN7d2/OZop+yq/Qc53GZTo0SSItJleuCn5iOU7ejz3tze11ucnz',cid:1182,form_id:52});
      }
    },
    async getInfo(arg){
      console.log('arg1')
      console.log('arg',arg)
      this.token = arg.token;
      this.cid = arg.cid;
      this.form_id = arg.form_id;
      
      // this.getProcess()
      
      this.getFormSave()
      
      // this.initApi()
    },
    addUsers(arg){
      console.log('arg3',arg,this.chooseIndex)
      //联系人
      if(this.isContactOne){
        let names,values
        if(this.form[this.popupIndex].names){
          names=this.form[this.popupIndex].names.split(',')
          values=this.form[this.popupIndex].values
        }else{
          names=[]
          values=[]
        }
        arg.forEach((v,i)=>{
          console.log('isContactOne',this.isContactOne,v,names)
          if(names.indexOf(v.username)==-1){
            names.push(v.username)
            values.push(v)
          }else{
            let idx=names.indexOf(v.username)
            names.splice(idx,1)
            names.push(v.username)
            values.splice(idx,1)
            values.push(v)
          }
          
        })
        console.log('names',names)
        this.form[this.popupIndex].names=names.join(',')
        this.form[this.popupIndex].values=values
        console.log('this.form[this.popupIndex]',this.form[this.popupIndex])
        this.isContactOne=false
        this.$forceUpdate();
        return
      }
      console.log('values2',this.personList.reviews[this.chooseIndex].review_user_ids.values)
      let arrData
      if(this.is_send_user_ids==true){
        arrData=JSON.parse(JSON.stringify(this.personList.reviews[this.chooseIndex].send_user_ids.values))
      }else{
        arrData=JSON.parse(JSON.stringify(this.personList.reviews[this.chooseIndex].review_user_ids.values))
      }
      // let arrData=JSON.parse(JSON.stringify(arrData1))
      if(arrData.length==0){
        // this.$set(this.personList1)
        arrData=[...arg];
        console.log('personList1324',arrData)
        if(this.is_send_user_ids==true){
          this.personList.reviews[this.chooseIndex].send_user_ids.values=[...arrData]
        }else{
          this.personList.reviews[this.chooseIndex].review_user_ids.values=[...arrData]
        }
        // arrData1=[...arrData]
        this.$forceUpdate();
        return
      }
      // let arr=[]
      // arrData.forEach((v,i)=>{
      //   console.log('v2',v)
      //   arr.push(v.id)
      // })
      
      // arg.forEach(m => {
      //     if(arr.indexOf(m.id)!="-1"){
      //       let idx=arr.indexOf(m.id)
      //       arrData.splice(idx,1) 
      //     }
      //     arrData.push(m)
      // });

      let json = arrData.concat(arg); //两个数组对象合并
      let newJson = []; //盛放去重后数据的新数组
      for(var item1 of json){  //循环json数组对象的内容
      	let flag = true;  //建立标记，判断数据是否重复，true为不重复
      	// for(var item2 of newJson){  //循环新数组的内容
        for(var i = 0; i < newJson.length; i++) {
      		if(item1.id==newJson[i].id){ //让json数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
            newJson.splice(i,1)
            newJson.push(item1)
      			flag = false;
      		}
      	}
      	if(flag){ //判断是否重复
      		newJson.push(item1); //不重复的放入新数组。  新数组的内容会继续进行上边的循环。
      	}
      }
      if(this.is_send_user_ids==true){
        this.personList.reviews[this.chooseIndex].send_user_ids.values=[...newJson]
      }else{
        this.personList.reviews[this.chooseIndex].review_user_ids.values=[...newJson]
      }
      // arrData1=[...newJson]
       console.log('personList12345',this.personList.reviews[this.chooseIndex])
       this.$forceUpdate();
    },
    contactOne(i){
      this.isContactOne=true
      this.popupIndex=i
      let data=JSON.stringify([])
      this.getToContacts(data)
    },
    getToContacts(data){
      if(process.env.NODE_ENV === 'production'){
        console.log('123')
        if(this.isAndroid){
          console.log('调用iosgoToUsers方法')
          window.android.goToUsers(data);
        }else if(this.isIOS){
          console.log('调用iosgoToUsers方法')
          window.webkit.messageHandlers.goToUsers.postMessage(data); 
        }else{
          this.addUsers(
          [
            {id: 59172,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "tt"}
          ]
        );
        }
      }else{
        console.log('124')
        //自己测试拿人员数据
        this.addUsers(
          [
            {id: 59179,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "tt23"},
            {id: 59175,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "tt234"},
            {id: 59160,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t3"},
            {id: 59161,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t4"},
            {id: 59162,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t5"},
            {id: 59163,
            photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
            username: "t6"},
          ]
        );
      }
      
    },
    validatorDetail(val){
      console.log('validatorDetail')
      console.log('validatorDetail',val,this.addressDetail)
      if(!val) return false
      else return true
    },
    submitSuccess( ){
      
      if(process.env.NODE_ENV === 'production'){
        if(this.isAndroid){
          console.log('调用submitSuccess方法')
          window.android.submitSuccess();
        }else if(this.isIOS){
          console.log('调用submitSuccess方法')
          window.webkit.messageHandlers.submitSuccess.postMessage(null); 
        }else{
          this.showToast('调用submitSuccess通知app失败')
        }
      }else{
        this.showToast('调用submitSuccess通知app失败1')
      }
    },
    getFormSave(){
      var that=this
      let data={form_id:this.form_id,cid:this.cid}
      $.ajax({
        url:`${this.baseUrl}app/form/getConfig`,
        type:'post',
        dataType:'json',
        data:data,
        // contentType: "application/json",
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response)
          if(response.code===0){
            console.log('response.data',response.data)
            that.form=response.data.form
            if(that.form.length>0){
              // that.noProcess=that.form.some(v=>{
              //   return v.type=='number'||v.type=='money'||v.type=='radio'||v.type=='checkbox'||v.type=='datearea'||v.type=='address'||v.type=='holiday'||v.type=='overtime'||v.type=='travel'||v.type=='goout'
              // })
              // console.log('that.noProcess',that.noProcess)
              that.form.forEach(v=>{
                if(v.type=='radio'||v.type=='checkbox'){
                  // v.options=v.options.split(',')
                  if(!v.options[0]){
                    v.options=['选项1','选项2','选项3','选项4']
                  }
                  // v.options=['1','2','3','4','5','6','7','8','9','9']
                  v.showRadio=0
                }
                
                if(v.type=='address'){
                  that.$set(v,'detail','')
                  that.$set(v,'city','')
                }
                if(v.type=='caption'){
                  v.values=v.fields[0].name
                }
                if(v.type=='image'||v.type=='file'){
                  v.values=[]
                  v.photos=[]
                }
                if(v.type=='contact'){
                  v.values=[]
                }
                if(v.type=='date'){
                  // v.date_type=1
                }
                if(v.type=='datearea'){
                  v.values=[]
                  that.$set(v,'long_time','')
                  // v.long_time=''
                  // v.date_type=3
                }
                
                if(v.type=='travel'){
                  v.values=[]
                  that.$set(v,'long_time','')
                  that.$set(v,'departure','')
                  that.$set(v,'destination','')
                  that.$set(v,'transportation','')
                  if(!v.names){
                    // v.names='开始时间,结束时间,时长,出发地,目的地,交通工具,单程/往返,备注'
                    v.fields.forEach(v=>{
                      that.travelNames.push(v.name)
                    })
                  }
                  // that.travelNames=v.names.split(',')
                  console.log('travelNames',that.travelNames)
                  that.groupType=2
                  that.groupTimeType=v.date_type

                  // v.date_type=3
                  // that.travelDateType=1
                  // that.travelList[0].is_time_update=1
                  that.travelDateType=v.is_time_update
                  that.travelList[0].is_time_update=v.is_time_update
                }
                if(v.type=='holiday'||v.type=='overtime'||v.type=='goout'){
                  v.values=[]
                  that.$set(v,'long_time','')
                  // v.need=1
                  // v.date_type=3
                  // that.travelNames=v.names.split(',')
                  console.log('travelNames',that.travelNames)
                  if(!v.names){
                    v.fields.forEach(v=>{
                      that.travelNames.push(v.name)
                    })
                  }
                  if(v.type=='holiday'){
                    // console.log('holiday',v)
                    that.groupType=1
                    // let holiday_types= JSON.parse(JSON.stringify(v.holiday_types))
                    for (var key in v.holiday_types) {
                      var m = v.holiday_types[key];
                      m.text=m.h_name
                    }
                  }
                  else if(v.type=='overtime'){
                    // v.date_type=1
                    that.groupType=3
                    if(v.fields[0].name=='开始时间'){
                      that.travelNames.unshift(
                        "外出类型不显示"
                      )
                      console.log('overtime开始时间',that.travelNames)
                    }
                    if(!v.overtime_types[0]){
                      v.overtime_types=['临时加班','紧急任务','自觉几班']
                    }
                    if(!v.info){
                      that.$set(v,'info',[])
                    }
                    
                  }
                  else if(v.type=='goout'){
                    // v.date_type=1
                    that.groupType=6
                    if(v.fields[0].name=='开始时间'){
                      that.travelNames.unshift(
                        "外出类型不显示"
                      )
                      console.log('goout开始时间',that.travelNames)
                    }
                    for (var key in v.goout_types) {
                      var m = v.goout_types[key];
                      m.text=m.type
                    }
                  }
                  
                  that.groupTimeType=v.date_type
                }
              })
            }
            that.spinner=false;
            console.log('that.form',that.form,'that.groupType',that.groupType,'that.groupTimeType',that.groupTimeType)
            // if(that.groupType==1){
            //   that.getHolidayList()
            // }
          }else{
            that.showToast(response.msg);
            
          }
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    
    getApplyLength(start_time,end_time,computedDay10){
      let that=this
      //computedDay10 控件类型不是1为出差
      let date_type=this.form[this.popupIndex].date_type
      let data={
        start_time:start_time.replace(/[/]/g,'-'),
        end_time:end_time.replace(/[/]/g,'-'),
        cid:this.cid,
        form_id:this.form_id,
        date_type:date_type,
      }
      if(this.groupType==1){
        if(!this.holiday_id){
          this.showToast('请选择请假类型')
          return
        }
        data.holiday_id=Number(this.holiday_id)
      }
      $.ajax({
        url:`${this.baseUrl}app/approval/length`,
        type:'post',
        dataType:'json',
        data:data,
        // processData: false,//用于对data参数进行序列化处理 这里必须false
        // contentType: false, //必须*/
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('getApplyLength-response.data',response)
          let day=0,type=1   //请求成功返回的数据
          if(response.code===0){
              console.log('response.data',response.data)
            if(!response.data.info){
              that.showToast('请检查加班时间是否正确')
              // that.form[that.popupIndex].values=[]
              return 
            }
            response.data.info.forEach(v => {
              if(that.groupType==3&&response.data.info.length>1){
                v.value=v.ours
              }
            });
            day=response.data.total_time
            that.unit=response.data.unit
            // console.log('外出1',computedDay10,that.groupType,that.form[that.popupIndex],day)
            if(computedDay10==1){
              that.computedDay1=day
              that.form[that.popupIndex].long_time=day
              that.form[that.popupIndex].info1=response.data.info
              if(that.groupType==3){
                if(response.data.info.length>1){
                  that.$set(that.form[that.popupIndex],'info',response.data.info)
                  console.log('that.form',that.form)
                }else{
                  // console.log('response.data.info[0].ours',response.data.info[0].ours)
                  // if(response.data.info[0].ours){
                  //   that.$set(that.form[that.popupIndex],'info',response.data.info)
                  // }else{
                  //   that.showToast('加班时间应该为下班时间！')
                  //   that.form[that.popupIndex].values[1]=''
                  //   that.form[that.popupIndex].long_time=''
                  // }
                  that.$set(that.form[that.popupIndex],'info',[])
                  console.log('that.form1',that.form)
                }
              }
              if(that.groupType==1){
                console.log('jiaqi',that.form[that.popupIndex],that.duration)
                if(that.form[that.popupIndex].long_time>that.duration&&that.disabled==true){
                  that.showToast('假期余额不足,请重新选择时间！')
                  that.form[that.popupIndex].long_time=''
                  that.form[that.popupIndex].values[1]='' 
                }
                if(day==0){
                  that.form[that.popupIndex].is_time_update=1
                }
              }
              if(that.groupType==6){
                console.log('外出',that.form[that.popupIndex],day,that.form[that.popupIndex].long_time)
                if(day==0){
                  // that.form[that.popupIndex].long_time=''
                  that.form[that.popupIndex].is_time_update=1
                }
              }
            }else{
              if(day==0){
                that.travelList[that.itemIndex].is_time_update=1
              }else{
                that.travelList[that.itemIndex].is_time_update=that.travelDateType
              }
              that.travelList[that.itemIndex].computedDay10=day
              that.travelList[that.itemIndex].info1=response.data.info
              // that.form[that.popupIndex].long_time=that.computedDay11
              that.$set(that.form[that.popupIndex],'long_time',that.computedDay11)
              console.log('获取时长that.form[that.popupIndex]',that.form[that.popupIndex])
            }
            console.log('获取时长成功'+day);
          }else{
            console.log('获取时长response.msg',response.msg)
            if(computedDay10==1){
              console.log(that.form[that.popupIndex])
              that.$set(that.form[that.popupIndex].values,1,'')
            }else{
              that.travelList[that.itemIndex].currentTimeEnd10=''
            }
            that.showToast(response.msg);
          }
          
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    getProcess(data){
      let that=this
      $.ajax({
        url:`${this.baseUrl}app/form/getProcess`,
        type:'post',
        dataType:'json',
        data:data,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
            // XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        },
        success:function (response) {
          console.log('response.data1',response)
          if(response.code===0){
            that.personList=response.data.process
            console.log(response.data.process) 
            let reviewsIndex=[]
            let arr=[],arr1=[]
            console.log('getProcess',arr,that.personList)
            that.personList.userInfo.forEach(v=>{
              if(that.personList.start_send_ids.includes(Number(v.id))){
                arr.push(v)
              }
              if(that.personList.end_send_ids.includes(Number(v.id))){
                arr1.push(v)
              }
              that.personList.reviews.forEach((m,i)=>{
                that.$set(m.review_user_ids,'values',[])
                that.$set(m.send_user_ids,'values',[])
                // m.review_user_ids.values=[]
                // m.send_user_ids.values=[]
                that.$set(m.send_user_ids,'isActive1',false)
                // if(m.send_user_ids&&m.send_user_ids.indexOf(Number(v.id))!=-1){
                //   let idx11=m.send_user_ids.indexOf(Number(v.id))
                //   that.personList.reviews[i].send_user_ids[idx11]=v
                // }
                if(m.send_user_ids.type==1||m.send_user_ids.type==0){
                  if(m.send_user_ids.user_ids.indexOf(Number(v.id))!=-1){
                    let idx1=m.send_user_ids.user_ids.indexOf(Number(v.id))
                    that.personList.reviews[i].send_user_ids.user_ids[idx1]=v
                  }
                  else{
                    m.send_user_ids.values=[]
                  }  
                }
                if(m.send_user_ids.type==0){
                  m.send_user_ids.values=that.personList.reviews[i].send_user_ids.user_ids
                }
                if(m.review_user_ids.type==1||m.review_user_ids.type==0){
                  if(m.review_user_ids.user_ids.indexOf(Number(v.id))!=-1){
                    let idx2=m.review_user_ids.user_ids.indexOf(Number(v.id))
                    that.personList.reviews[i].review_user_ids.user_ids[idx2]=v
                  }
                  else{
                    m.review_user_ids.values=[]
                  }  
                }
                if(m.review_user_ids.type==0){
                  m.review_user_ids.values=that.personList.reviews[i].review_user_ids.user_ids
                }
              })
            })
            that.start_send_ids=arr;
            that.end_send_ids=arr1;
            // that.personList.reviews[i]
            console.log('start_send_ids',arr,arr1)
            console.log(that.start_send_ids)
            console.log(that.end_send_ids)
            console.log('that.personList.reviews',that.personList,that.personList.reviews)
            console.log('values',that.personList.reviews[that.chooseIndex],that.personList.reviews[that.chooseIndex].review_user_ids.values)
            that.$forceUpdate()
          }else{
            that.showToast(response.msg);
          }
          
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    
    getHolidayLimit(){
      let that=this
      // console.log(data)
      let data={
        cid:this.cid,
        holiday_id:that.holiday_id
      }
      $.ajax({
        url:`${this.baseUrl}app/apply/getHolidayLimit`,
        type:'post',
        dataType:'json',
        data:data,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response',response)
          if(response.code===0){
            if(response.duration>=0){
              that.duration=response.duration
              that.disabled=true
            }else{
              that.disabled=false
            }
          }else{
            that.showToast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    getCreateApply(data){
      let that=this
      console.log(data,'9')
      $.ajax({
        url:`${this.baseUrl}app/approval/create`,
        type:'post',
        dataType:'json',
        // data:data.serialize(),
        // data:data,
        data:JSON.stringify(data),
        // traditional: true,//如果你想要用传统的方式来序列化数据，那么就设置为true
        // processData:false,//选项为 false，防止自动转换数据格式。
        async: false, // 使用同步操作 
        timeout : 50000, //超时时间：50秒 
        contentType: "application/json",
        // contentType: "application/x-www-form-urlencoded",
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
            // XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        },
        success:function (response) {
          console.log('response.data1',response)
          if(response.code===0){
            that.submitSuccess()
          }else{
            that.showToast(response.msg);
          }
          that.isClickSubmit=false
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
          that.isClickSubmit=false
        }
      })
    },
    getAreasH5(){
      let that=this
      $.ajax({
        url:`${this.baseUrl}pub/area/getAreasH5`,
        type:'post',
        dataType:'json',
        data:{},
        // contentType: "application/json",
        beforeSend: function (XMLHttpRequest) {
          XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data1',response)
          if(response.code===0){
            that.areaList=response.data
            console.log(' that.areaList', that.areaList)
          }else{
            that.showToast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    onSubmit(){
      // this.showToast("点击提交")
      console.log('reason',this.reason)
      if(this.isClickSubmit){
        console.log('刚点了')
        return
      }
      console.log('第一次点')
      this.isClickSubmit=true
      // 1请假2出差3加班6外出
      // 提交表单且验证通过后触发
      console.log(this.form)
      //出差數據
      console.log('this.travelList',this.travelList)
      console.log('this.computedDay11',this.computedDay11)
      console.log('this.reason11',this.reason11)
      console.log('this.travelPartner',this.travelPartner)
      
      let form_data={}
      for (var key in this.form) {
        let name = key;         
        let value = this.form[key];
        if(value.type=='datearea'){
          if(value.need==1){
            console.log('datearea324')
            if(!value.values[0]){
              this.showToast(value.fields[0].name+'不能为空！')
              return
            }else if(!value.values[1]){
              this.showToast(value.fields[1].name+'不能为空！')
              return
            }else if(!value.long_time){
              this.showToast(value.fields[2].name+'不能为空！')
              return
            }
          }
          form_data[value.fields[0].key]=value.values[0].replace(/[/]/g,'-')
          form_data[value.fields[1].key]=value.values[1].replace(/[/]/g,'-')
          form_data[value.fields[2].key]=value.long_time
        }
        else if(value.type=='checkbox'){
          if(value.need==1){
            if(!value.values){
              this.showToast(value.fields[0].name+'不能为空！')
              this.isClickSubmit=false
              return
            }
          }
          form_data[value.fields[0].key]=value.values.split(',')
        }
        else if(value.type=='date'){
          if(value.need==1){
            if(!value.values){
              this.showToast(value.fields[0].name+'不能为空！')
              this.isClickSubmit=false
              return
            }
          }
          form_data[value.fields[0].key]=value.values.replace(/[/]/g,'-')
        }
        else if(value.type=='image'||value.type=='file'){
          if(value.need==1){
            if(!value.photos[0]){
              this.showToast(value.fields[0].name+'上传不能为空！')
              this.isClickSubmit=false
              return
            }
          }
          form_data[value.fields[0].key]= value.photos
        }
        else if(value.type=='address'){
          if(value.need==1&&!value.values){
            this.showToast(value.fields[0].name+'不能为空！')
            this.isClickSubmit=false
            return
          }else if(value.address==1&&value.need2==1&&!value.detail){
            this.showToast('详细地址不能为空！')
            this.isClickSubmit=false
            return
          }
          form_data[value.fields[0].key]=value.city
          // form_data[value.fields[0].key]=value.values
          if(value.address==1){
            form_data[value.fields[1].key]=value.detail
          }
        }
        else if(value.type=='contact'){
          if(value.need==1&&!value.values[0]){
            this.showToast(value.fields[0].name+'不能为空！')
            this.isClickSubmit=false
            return
          }
          let data20=JSON.parse(JSON.stringify(value.values))
          let data21=[]
          data20.forEach(v=>{
            data21.push(v.id)
          })
          form_data[value.fields[0].key]=data21
        }
        else if(value.type=='holiday'){
          console.log('holiday')
          if(value.need==1){
            if(!this.holidayType){
              this.showToast(this.travelNames[0]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.values[0]){
              this.showToast(this.travelNames[1]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.values[1]){
              this.showToast(this.travelNames[2]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(value.long_time==="0"){
              this.showToast(this.travelNames[3]+'不能为0！')
              this.isClickSubmit=false
              return
            }else if(!value.long_time){
              this.showToast(this.travelNames[3]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(value.need_msg==1&&!this.reason){
              this.showToast(this.travelNames[4]+'不能为空！')
              this.isClickSubmit=false
              return
            } 
          }
          form_data[value.fields[0].key]=Number(this.holiday_id)
          // form_data[value.fields[0].key]=this.holidayType
          form_data[value.fields[1].key]=value.values[0].replace(/[/]/g,'-')
          form_data[value.fields[2].key]=value.values[1].replace(/[/]/g,'-')
          form_data[value.fields[3].key]=value.long_time
          form_data[value.fields[4].key]=this.reason
          form_data["info"]=value.info1
          form_data['date_type']=value.date_type
        }
        else if(value.type=='overtime'){
          if(value.need==1){
            console.log('jiaban',value.info.length<=0,value.info.length>0)
            //有外出类型
            if(this.travelNames[0]!='外出类型不显示'&&!this.overTimeType){
              this.showToast(this.travelNames[0]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.values[0]){
              this.showToast(this.travelNames[1]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.values[1]){
              this.showToast(this.travelNames[2]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.info.length&&!value.long_time){
              this.showToast(this.travelNames[3]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(value.info.length&&value.info.length>0&&!this.selfOverTime){
              this.showToast(this.travelNames[3]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(value.need_msg==1&&!this.reason){
              this.showToast(this.travelNames[4]+'不能为空！')
              this.isClickSubmit=false
              return
            }  
          }
          if(this.travelNames[0]=='外出类型不显示'){
            form_data[value.fields[0].key]=value.values[0].replace(/[/]/g,'-')
            form_data[value.fields[1].key]=value.values[1].replace(/[/]/g,'-')
            if(!value.info.length){
              form_data[value.fields[2].key]=value.long_time
            }else if(value.info.length&&value.info.length>0){
              form_data[value.fields[2].key]=this.selfOverTime
            }
            form_data[value.fields[3].key]=this.reason
          }else{
            form_data[value.fields[0].key]=this.overTimeType
            form_data[value.fields[1].key]=value.values[0].replace(/[/]/g,'-')
            form_data[value.fields[2].key]=value.values[1].replace(/[/]/g,'-')
            if(!value.info.length){
              form_data[value.fields[3].key]=value.long_time
            }else if(value.info.length&&value.info.length>0){
              form_data[value.fields[3].key]=this.selfOverTime
            }
            form_data[value.fields[4].key]=this.reason
          }
          
          form_data["info"]=value.info1
          form_data['date_type']=value.date_type
        }
        else if(value.type=='travel'){
          let data=[]
          let info=[]
          let travelListCopy=JSON.parse(JSON.stringify(this.travelList))
          // let data2=JSON.parse(JSON.stringify(data1))
          for (let index = 0; index < travelListCopy.length; index++) {
            var v = travelListCopy[index];
            if(value.need==1){
              if(!v.currentTimeStart10){
                this.showToast(`出差第${index+1}项`+this.travelNames[0]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(!v.currentTimeEnd10){
                this.showToast(`出差第${index+1}项`+this.travelNames[1]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(v.computedDay10==="0"){
                this.showToast(`出差第${index+1}项`+this.travelNames[2]+'不能为0！')
                this.isClickSubmit=false
                return
              }else if(!v.computedDay10){
                this.showToast(`出差第${index+1}项`+this.travelNames[2]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(!v.startingCity){
                this.showToast(`出差第${index+1}项`+this.travelNames[3]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(!v.endingCity){
                this.showToast(`出差第${index+1}项`+this.travelNames[4]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(!v.vehicle){
                this.showToast(`出差第${index+1}项`+this.travelNames[5]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(!v.roundTrip){
                this.showToast(`出差第${index+1}项`+this.travelNames[6]+'不能为空！')
                this.isClickSubmit=false
                return
              }else if(value.need_msg==1&&!v.reason10){
                this.showToast(`出差第${index+1}项`+this.travelNames[7]+'不能为空！')
                this.isClickSubmit=false
                return
              }
            }
            let data1={
              start_time:'',
              end_time:'',
              travel_length:'',
              departure:'',//出发地
              destination:'',//目的地
              transportation:'',
              travel_type:'',
              remark:'',
            }
            data1.start_time=v.currentTimeStart10.replace(/[/]/g,'-')
            data1.end_time=v.currentTimeEnd10.replace(/[/]/g,'-')
            data1.travel_length=v.computedDay10
            data1.departure=v.startingCityId
            data1.destination=v.endingCityId
            // data1.departure=v.startingCity
            // data1.destination=v.endingCity
            data1.transportation=v.vehicle
            data1.travel_type=v.roundTrip
            data1.remark=v.reason10
            info.push(v.info1)
            this.$set(data,index,data1)
          }
          
          if(value.need==1){
            if(!this.computedDay11){
              this.showToast(this.travelNames[8]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!this.reason11){
              this.showToast(this.travelNames[9]+'不能为空！')
              this.isClickSubmit=false
              return
            }
            // else if(!this.travelPartner){
            //   this.showToast(this.travelNames[10]+'不能为空！')
            //   this.isClickSubmit=false
            //   return
            // }
          } 
          form_data[value.fields[8].key]=this.computedDay11
          form_data[value.fields[9].key]=this.reason11
          form_data[value.fields[10].key]=this.travelPartner
          form_data['data']=data
          form_data['info']=info
          form_data['date_type']=this.unit||value.date_type
          console.log('出差数组',data)
        }
        else if(value.type=='goout'){
          if(value.need==1){
            // console.log('value.long_time===0',this.form,value.long_time,value.long_time===0,value.long_time==0,value.long_time=='0',value.long_time==='0',!value.long_time)
            if(this.travelNames[0]!='外出类型不显示'&&!this.typeOut){
              this.showToast(this.travelNames[0]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.values[0]){
              this.showToast(this.travelNames[1]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(!value.values[1]){
              this.showToast(this.travelNames[2]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(value.long_time==="0"){
              console.log('value.long_time10')
              this.showToast(this.travelNames[3]+'不能为0！')
              this.isClickSubmit=false 
              return
            }else if(!value.long_time){
              this.showToast(this.travelNames[3]+'不能为空！')
              this.isClickSubmit=false
              return
            }else if(value.need_msg==1&&!this.reason){
              this.showToast(this.travelNames[4]+'不能为空！')
              this.isClickSubmit=false
              return 
            }
            // else if(!this.goOutImg){
            //   this.showToast(this.travelNames[5]+'不能为空！')
            //   this.isClickSubmit=false
            //   return
            // }
          }
          if(this.travelNames[0]=='外出类型不显示'){
            form_data[value.fields[0].key]=value.values[0].replace(/[/]/g,'-')
            form_data[value.fields[1].key]=value.values[1].replace(/[/]/g,'-')
            form_data[value.fields[2].key]=value.long_time
            form_data[value.fields[3].key]=this.reason
            form_data[value.fields[4].key]=this.goOutImg
          }else{
            form_data[value.fields[0].key]=this.typeOut
            form_data[value.fields[1].key]=value.values[0].replace(/[/]/g,'-')
            form_data[value.fields[2].key]=value.values[1].replace(/[/]/g,'-')
            form_data[value.fields[3].key]=value.long_time
            form_data[value.fields[4].key]=this.reason
            form_data[value.fields[5].key]=this.goOutImg
          }
          
          form_data["info"]=value.info1
          form_data['date_type']=value.date_type
        }
        else{
          if(value.need==1&&!value.values){
            this.showToast(value.fields[0].name+'不能为空！')
            this.isClickSubmit=false
            return
          }
          form_data[value.fields[0].key]=value.values
          // form_data[value.id]=value.values
        }  
      }
      console.log('form_data',form_data)
      //审批人数据
      console.log('提交审批人复制copyReviews',this.copyReviews)
      console.log('审批人this.personList.reviews',this.personList)

      // let review1=JSON.parse(JSON.stringify(this.personList))
      let review1=JSON.parse(JSON.stringify(this.copyReviews))
      // let review1=review11.reviews
      // var review1=this.personList.reviews
      // var review1=_.cloneDeep(this.personList.reviews)
      console.log('review1',review1,this.personList.reviews)
      // this.isClickSubmit=false
      // return
      for (let i = 0; i < review1.length; i++) {
        var v =review1[i];
        console.log('review1v',v)
        // if(v.send_user_ids&&v.send_user_ids.length){
        //   for (let j = 0; j < v.send_user_ids.length; j++) {
        //     v.send_user_ids[j]=v.send_user_ids[j].id
        //     console.log('send_user_idsm',v.send_user_ids[j])
        //   }
        // }
        var arr1=[]
        if(v.send_user_ids.values&&v.send_user_ids.values.length){
          for (let k = 0; k < v.send_user_ids.values.length; k++) {
            arr1.push(v.send_user_ids.values[k].id)
          }
        }else{
          arr1=null
        }
        // if(v.send_user_ids.length>0){
        //   v.send_user_ids=arr1
        // }else{
        //   v.send_user_ids=[]
        // }
        v.send_user_ids=arr1
        var arr=[]
        if(v.review_user_ids.values&&v.review_user_ids.values.length){
          for (let j = 0; j < v.review_user_ids.values.length; j++) {
            arr.push(v.review_user_ids.values[j].id)
          }
        }else {
          if(v.apply_status==1){
            console.log(`第${i+1}项审批人不能为空`)
            this.showToast(`第${i+1}项审批人不能为空`)
            this.isClickSubmit=false
            return
          }
          arr=null
        }
        v.review_user_ids=arr
      }
      // console.log('review123',this.personList.reviews)
      console.log('review123',review1,this.personList.reviews)
      
      // console.log('this.personList.start_send_ids',this.personList.start_send_ids)
      // console.log('this.personList.end_send_ids',this.personList.end_send_ids)
      let start_send_ids=[],end_send_ids=[]
      if(this.personList.start_send_ids.length>0){
        start_send_ids=this.personList.start_send_ids
      }else{
        start_send_ids=null
      }
      if(this.personList.end_send_ids.length>0){
        end_send_ids=this.personList.end_send_ids
      }else{
        end_send_ids=null
      }
      let data10={
        cid:this.cid,
        form_id:this.form_id,
        form_data,
        start_send_ids:start_send_ids,
        end_send_ids:end_send_ids,
        // review:review1.reviews,
        review:review1,
      }
      console.log('data10',data10)
      // let data10=new FormData()
      // data10.append('cid',this.cid)
      // data10.append('form_id',this.form_id)
      // data10.append('form_data',form_data)
      // data10.append('start_send_ids',this.personList.start_send_ids)
      // data10.append('end_send_ids',this.personList.end_send_ids)
      // data10.append('review',review1)
      // console.log('提交data10',data10)
      this.getCreateApply(data10)
      console.log('提交')
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    onChangeTime(picker){
      // picker.getValues()
      let data=picker.getValues()
      let str=''
      for (let index = 0; index < data.length; index++) {
        const v = data[index];
        if(index<2){
          str+=data[index]+'/'
        }else if(index==2){
          str+=data[index]+' '
        }else if(index==3){
          str+=data[index]+':'
        }else{
          str+=data[index]
        }
      }
      this.title=str
      console.log(this.title)
    },
    onChangeTimeA(value){
      console.log('onChangeTimeA',value)
      this.currentTime1=value.replace('-','/')
      // let title=value.replace('-','/')
      // if(title.indexOf('AM')!=-1){
      //   this.title=title.replace('AM','上午')
      // }else if(title.indexOf('PM')!=-1){
      //   this.title=title.replace('PM','下午')
      // }
      
    },
    //计算时间区间时长
    computedDay(currentTimeStart,currentTimeEnd,popupIndex,timeItem,type){
      //type 控件类型 不传默认为日期区间
      console.log('currentTimeStart1',currentTimeStart,currentTimeEnd)
      let day
      // let dateType=0//3为上午下午时间
      if(currentTimeStart.indexOf('上午')!=-1){
        currentTimeStart=currentTimeStart.replace('上午','06:00')
        // dateType=3
      }
      else if(currentTimeStart.indexOf('下午')!=-1){
        currentTimeStart=currentTimeStart.replace('下午','18:00')
        // dateType=3
      }
      if(currentTimeEnd.indexOf('上午')!=-1){
        currentTimeEnd=currentTimeEnd.replace('上午','06:00')
        // dateType=3
      }
      else if(currentTimeEnd.indexOf('下午')!=-1){
        currentTimeEnd=currentTimeEnd.replace('下午','18:00')
        // dateType=3
      }
      console.log('currentTimeStart',currentTimeStart,time(currentTimeStart))
      console.log('currentTimeEnd',currentTimeEnd,time(currentTimeEnd))
      function time(date) {
        return new Date(date).getTime();
      }
      if(time(currentTimeEnd)<time(currentTimeStart)){
        if(timeItem>0){
          this.showToast('结束时间不能小于开始时间')
          if(type=='travel'){
            // this.$set(this.travelList[this.itemIndex].currentTimeEnd10,1,'')
            this.travelList[this.itemIndex].currentTimeEnd10=''
          }else{
            this.$set(this.form[popupIndex].values,1,'')
          }
          
          return
        }else{
          this.showToast('开始时间不能大于结束时间')
          if(type=='travel'){
            // this.$set(this.travelList[this.itemIndex].currentTimeStart10,1,'')
            this.travelList[this.itemIndex].currentTimeStart10=''
          }else{
            this.$set(this.form[popupIndex].values,0,'')
          }
          return
        } 
      }else if(time(currentTimeEnd)==time(currentTimeStart)&&this.dateType=='datetime'){
        if(timeItem>0){
          this.showToast('结束时间不能等于开始时间')
          if(type=='travel'){
            // this.$set(this.travelList[this.itemIndex].currentTimeEnd10,1,'')
            this.travelList[this.itemIndex].currentTimeEnd10=''
          }else{
            this.$set(this.form[popupIndex].values,1,'')
          }
          
          return
        }else{
          this.showToast('开始时间不能等于结束时间')
          if(type=='travel'){
            // this.$set(this.travelList[this.itemIndex].currentTimeStart10,1,'')
            this.travelList[this.itemIndex].currentTimeStart10=''
          }else{
            this.$set(this.form[popupIndex].values,0,'')
          }
          return
        }
      }
      //日期区间时长计算
      if(type=='datearea'){
        if(currentTimeStart&&currentTimeEnd&&time(currentTimeEnd)>=time(currentTimeStart)){
          let a=time(currentTimeEnd)-time(currentTimeStart)
          let b
          console.log('this.dateType',this.dateType)
          //年月日
          if(this.dateType=='date'){
            b=a/ 1000 / 60 / 60 / 24;
            day=b+1
          }else if(this.dateType=='datetime'){
            // 年月日时分
            b=a/ 1000 / 60 / 60;
            day=b.toFixed(2)
            // console.log('b-',b,day)
          }
          else if(this.dateType=='dateareaAM'){
            //年月日上午下午
            console.log('b-currentTimeEnd',currentTimeStart,currentTimeEnd)
            b=a/ 1000 / 60 / 60/ 24;
            if(currentTimeStart.indexOf('06:00')!=-1&&currentTimeEnd.indexOf('06:00')!=-1){
              day=b+0.5
            }
            else if(currentTimeStart.indexOf('18:00')!=-1&&currentTimeEnd.indexOf('18:00')!=-1){
              day=b+0.5
            }
            else if(currentTimeStart.indexOf('06:00')!=-1&&currentTimeEnd.indexOf('18:00')!=-1){
              day=b+0.5
            }
            else if(currentTimeStart.indexOf('18:00')!=-1&&currentTimeEnd.indexOf('06:00')!=-1){
              day=b+0.5
            }else{
              day=b
            }
          }
          console.log('a',a,b,day)
        }else{
          day="-"
        }
        return day
      // }else if(type=='travel'){
      }else{
        
        //出差计算时长
        //待掉接口计算
        console.log('计算groupTimeType2为上午',this.groupTimeType)
        if(this.groupTimeType==2){
          let Start=currentTimeStart.replace('06:00','上午').replace('18:00','下午')
          let End=currentTimeEnd.replace('06:00','上午').replace('18:00','下午')
          this.getApplyLength(Start,End,type=='travel'?2:1)
        }else{
          this.getApplyLength(currentTimeStart,currentTimeEnd,type=='travel'?2:1)
        }
        
      }
      // else{
      //   //请假等3种计算时长
      //   //待掉接口计算
      // }
      
    },
    onConfirmDate(value){
      console.log('非日期时间组件第几项value',value)
      if (moment.isDate(value)) {
        console.log('日期时间组件第几项',this.popupIndex,this.timeItem)
        let data1=''
        //时长为小时还是天
        if(this.dateType=='date'){
          data1= moment(value).format('YYYY/MM/DD')
        }else if(this.dateType=='datetime'){
          data1 = moment(value).format('YYYY/MM/DD HH:mm')
        }
        //出差控件里面的时间
        if(this.form[this.popupIndex].type=='travel'){
          console.log('this.form[this.popupIndex].type',this.form[this.popupIndex].type,this.timeItem)
          if(this.timeItem==0){
            this.travelList[this.itemIndex].currentTimeStart10=data1
          }else if(this.timeItem==1){
            this.travelList[this.itemIndex].currentTimeEnd10=data1
          }
          if(this.travelList[this.itemIndex].currentTimeStart10&&this.travelList[this.itemIndex].currentTimeEnd10){
            this.travelList[this.itemIndex].computedDay10=this.computedDay(this.travelList[this.itemIndex].currentTimeStart10,this.travelList[this.itemIndex].currentTimeEnd10,this.popupIndex,this.timeItem,'travel')
            console.log('2this.form[this.popupIndex]',this.form[this.popupIndex])
          }
          this.showTimePickerDay = false;
          return
        }
        if(this.timeItem!=-1){
          console.log('非日期时间组件第几项',this.popupIndex,this.timeItem,data1)
          //非日期时间组件第几项
          //请假this.groupType==1
          if(this.datearea=='datearea'&&this.groupType==1&&!this.holiday_id){
            this.showToast('请选择请假类型')
            console.log('请假this.groupType==1没有假期类型-this.form[this.popupIndex].values',this.form[this.popupIndex].values,this.currentTime)
            this.showTimePickerDay = false;
            return
          }
          this.$set(this.form[this.popupIndex].values,this.timeItem,data1)
          if(this.form[this.popupIndex].values[0]&&this.form[this.popupIndex].values[1]){
            
            this.form[this.popupIndex].long_time=this.computedDay(this.form[this.popupIndex].values[0],this.form[this.popupIndex].values[1],this.popupIndex,this.timeItem,this.form[this.popupIndex].type)
            console.log('1this.form[this.popupIndex]',this.form[this.popupIndex])
          }
          // this.form[this.popupIndex].values[this.timeItem]
        }else{
          //日期
          // if(this.dateType=='date'){
          // this.form[this.popupIndex].values = moment(value).format('YYYY/MM/DD')
          // }else if(this.dateType=='datetime'){
          // this.form[this.popupIndex].values = moment(value).format('YYYY/MM/DD HH:mm')
          // }
          this.form[this.popupIndex].values =data1
        }
        
        console.log(' this.form[this.popupIndex]',this.popupIndex, this.form[this.popupIndex])
      }
      this.showTimePickerDay = false;
    },
    onConfirmDateA(value){
      console.log('上午日期时间组件第几项value',value)
      console.log('上午日期时间组件form',this.form)
      if (value) {
        console.log('日期时间组件第几项',this.popupIndex,this.timeItem)
        // let data1=value
        let data1=''
        // //时长为小时还是天
        if(this.dateType=='date'){
          data1= moment(value).format('YYYY/MM/DD')
        }else if(this.dateType=='datetime'){
          data1 = moment(value).format('YYYY/MM/DD HH:mm')
        }else{
          console.log('value.indexOf',value.indexOf('PM'))
          if(value.indexOf('AM')!=-1){
            data1 = value.replace('AM','上午')
          }else if(value.indexOf('PM')!=-1){
            console.log('value.indexOf2',value.indexOf('PM'))
            data1 = value.replace('PM','下午')
          }else{
            data1 = value.replace('AM','下午')
          }
          
        }
        console.log('data1',data1)
        //出差控件里面的时间
        if(this.form[this.popupIndex].type=='travel'){
          console.log('this.form[this.popupIndex].type',this.form[this.popupIndex].type,this.timeItem)
          if(this.timeItem==0){
            this.travelList[this.itemIndex].currentTimeStart10=data1
          }else if(this.timeItem==1){
            this.travelList[this.itemIndex].currentTimeEnd10=data1
          }
          if(this.travelList[this.itemIndex].currentTimeStart10&&this.travelList[this.itemIndex].currentTimeEnd10){
            this.travelList[this.itemIndex].computedDay10=this.computedDay(this.travelList[this.itemIndex].currentTimeStart10,this.travelList[this.itemIndex].currentTimeEnd10,this.popupIndex,this.timeItem,'travel')
            console.log('2this.form[this.popupIndex]',this.form[this.popupIndex])
          }
          this.showTimePickerDayA = false;
          return
        }
        if(this.timeItem!=-1){
          console.log('非日期时间组件第几项',this.popupIndex,this.timeItem)
          //非日期时间日期范围组件第几项
          // this.form[this.popupIndex].values[this.timeItem]=data1
          console.log('this.form[this.popupIndex].values',this.form[this.popupIndex].values)
          if(this.datearea=='datearea'&&this.groupType==1&&!this.holiday_id){
            this.showToast('请选择请假类型')
            console.log('上午请假this.groupType==1没有假期类型-this.form[this.popupIndex].values',this.form[this.popupIndex].values,this.currentTime1)
            this.showTimePickerDayA = false;
            return
          }
          this.$set(this.form[this.popupIndex].values,this.timeItem,data1)
          if(this.form[this.popupIndex].values[0]&&this.form[this.popupIndex].values[1]){
            this.form[this.popupIndex].long_time=this.computedDay(this.form[this.popupIndex].values[0],this.form[this.popupIndex].values[1],this.popupIndex,this.timeItem,this.form[this.popupIndex].type)
            console.log('1this.form[this.popupIndex]',this.form[this.popupIndex])
          }
         
        }else{
          //日期
          this.form[this.popupIndex].values =data1
        }
        
        console.log(' this.form[this.popupIndex]',this.popupIndex, this.form[this.popupIndex])
      }
      this.showTimePickerDayA = false;
    },
    beforeReadImgList(file){
      console.log('file');
      console.log(file,file.file,Array.isArray(file) ==true);
      if(Array.isArray(file) ==true){
        if(file.length>10){
          this.showToast('最多只能同时上场10张图片！')
        }
      }
      return true
    },
    setPopupIndex(i){
      this.popupIndex=i
      console.log('setPopupIndex',this.popupIndex,i);
    },
    afterReadImgList(file) {
      // 此时可以自行将文件上传至服务器
      console.log('file');
      console.log(file,file.file);
      console.log(this.popupIndex);
      console.log(this.form[this.popupIndex]);
      console.log(this.form[this.popupIndex].values);
      let formData = new FormData();
      // console.log('file.isArray',Array.isArray(file) ==true)
      if(Array.isArray(file) ==true){
        this.uploadImgNum=file.length
        for(var i=0;i<file.length;i++) {  //循环获取上传个文件
          formData.append("image[]",file[i].file);
        }
      }else{
        this.uploadImgNum=0
        //只选了一个
        formData.append("image[]",file.file);
      }
      this.uploadImg(formData)
    },
    //附件上传
    afterReadImgList2(file) {
      // 此时可以自行将文件上传至服务器
      console.log('file2');
      console.log(file);
      console.log(this.popupIndex);
      console.log(this.form[this.popupIndex]);
      console.log(this.form[this.popupIndex].values);
      let formData = new FormData();
      if(Array.isArray(file) ==true){
        for(var i=0;i<file.length;i++) {  //循环获取上传个文件
          formData.append("file[]",file[i].file);
        }
      }else{
        //只选了一个
        formData.append("file[]",file.file);
      }
      this.uploadImg1(formData)
    },
    //外出上传图片
    afterReadImgList1(file) {
      // 此时可以自行将文件上传至服务器
      console.log('file');
      console.log(file);
      let formData = new FormData();
      if(Array.isArray(file) ==true){
        this.uploadImgNum=file.length
        for(var i=0;i<file.length;i++) {  //循环获取上传个文件
          formData.append("image[]",file[i].file);
        }
      }else{
        this.uploadImgNum=0
        //只选了一个
        formData.append("image[]",file.file);
      }
      // formData.append("file",file.file);
      this.uploadImg(formData,'2')
    },
    beforeDeleteImgEvent(item,name){
      console.log('beforeDeleteImgEvent',this.popupIndex,item,name,name.index);
      return true
    },
    deleteImgEvent(item,name){
      console.log('this.popupIndex',this.popupIndex);
      console.log('deleteImgEvent',item,name.name,name.index);
      this.form[name.name].photos.splice(name.index,1);
      // this.form[this.popupIndex].values.splice(name.index,1);
      console.log(this.form[name.name]);
      console.log(this.form[this.popupIndex]);
    },
    deleteImgEvent1(item,name){
      console.log('this.popupIndex1',this.popupIndex);
      console.log('deleteImgEvent1',item,name,name.index);
      this.goOutImg.splice(name.index,1);
      console.log(this.goOutImg);
    },
    // deleteImg(item,name){
    //   console.log('deleteImg',item,name,this.form[this.popupIndex]);
    //   console.log(this.form[this.popupIndex]);
    //   return true
    // },
    // deleteImg1(item){
    //   console.log('deleteImg1',item);
    //   this.goOutImg='';
    //   console.log(this.goOutImg);
    //   return true
    // },
    uploadImg(data,type){
      //type 2外出上传图片 域名單獨寫的
      let that=this
      $.ajax({
        url:`${this.baseUrl}pub/api/uploadImage`,
        type:'post',
        dataType:'json',
        data:data,
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须*/
        // contentType: "application/json",
        // contentType: "multipart/form-data",
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('上传图片response.data1',response)
          if(response.code===0){
            //  that.showToast('上传图片成功');
            if(type!=2){
              // console.log('修改valuesresponse.data',response.data)
              // response.data.forEach((v,it)=>{ 
              //   let len=response.data.length-it
              //   console.log('it',it,len)
              //   that.$set(that.form[that.popupIndex].values[len],'photos',v)
              // })
              that.form[that.popupIndex].photos=that.form[that.popupIndex].photos.concat(response.data)
              // that.form[that.popupIndex].photos=that.form[that.popupIndex].photos.concat(response.data)
              console.log('that.form[that.popupIndex]',that.form[that.popupIndex])
            }else{
              // that.goOutImg=response.data
              that.goOutImg=that.goOutImg.concat(response.data)
            }
          }else{
            that.showToast(response.msg);
            if(type!=2){
              console.log('that.uploadImgNum',that.uploadImgNum)
              if(that.uploadImgNum>0){
                var num=(that.form[that.popupIndex].values.length)-that.uploadImgNum
                console.log('num',num)
                that.form[that.popupIndex].values.splice(num)
                console.log('that.form[that.popupIndex]',that.form[that.popupIndex])
              }else{
                that.form[that.popupIndex].values=[]
              }
              
            }else{
              if(that.uploadImgNum>0){
                var num1=(that.imgList1.length)-that.uploadImgNum
                console.log('num1',num1)
                that.form[that.popupIndex].values.splice(num1)
                console.log('that.imgList1=[]',that.imgList1)
              }else{
                that.imgList1=[]
              }
              // that.imgList1=[]
            }
          }
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    uploadImg1(data,type){
      //type 2外出上传图片 域名單獨寫的
      // 上传附件
      let that=this
      $.ajax({
        url:`${this.baseUrl}pub/api/uploadFile`,
        type:'post',
        dataType:'json',
        data:data,
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须*/
        // contentType: "application/json",
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token",that.token);
        },
        success:function (response) {
          console.log('response.data2',response)
          if(response.code===0){
            //  that.showToast('上传附件成功');
            if(type!=2){
              // that.form[that.popupIndex].photos.push(response.data)
              that.form[that.popupIndex].photos=that.form[that.popupIndex].photos.concat(response.data)
              console.log('that.form[that.popupIndex]',that.form[that.popupIndex])
            }else{
              that.goOutImg=that.goOutImg.concat(response.data)
            }
          }else{
            that.showToast(response.msg);
            if(type!=2){
              that.form[that.popupIndex].values=[]
            }else{
              that.imgList1=[]
            }
          }
        },
        error:function (err) {
          console.log(err)
          that.showToast('接口失败');
        }
      })
    },
    onConfirmHolidayTypes(value){
      console.log('this.popupIndex',this.popupIndex)
      // this.popupIndex=i;
      this.holidayType = value.text;
      this.holiday_id=value.holiday_id
      console.log('Number(this.holiday_id)',Number(this.holiday_id))
      this.groupTimeType=value.date_type
      //holiday_msg存假期类型或者外出加班类型
      this.form[this.popupIndex].holiday_msg=value.text
      this.form[this.popupIndex].date_type=value.date_type
      this.form[this.popupIndex].values=[]
      this.form[this.popupIndex].long_time=''
      this.showHolidayTypes = false;
      this.getHolidayLimit()
      console.log('this.form',this.form[this.popupIndex])
    },
    onConfirmOverTimeTypes(value){
      // this.popupIndex=i;
      this.overTimeType = value;
      this.form[this.popupIndex].holiday_msg=value
      this.showOverTimeTypes = false;
      console.log('this.form',this.form[this.popupIndex])
    },
    
    onConfirmTypeOuts(value){
      // this.popupIndex=i;
      this.typeOut = value.text;
      this.groupTimeType=value.date_type
      this.form[this.popupIndex].holiday_msg=value.text
      this.form[this.popupIndex].date_type=value.date_type
      this.form[this.popupIndex].values=[]
      this.form[this.popupIndex].long_time=''
      this.showTypeOuts = false;
      console.log('this.form',this.form[this.popupIndex])
    },
    //出差
    onConfirmStartingCity(values){
      this.travelList[this.itemIndex].startingCity = values.map((item) => item.name).join('/');
      this.travelList[this.itemIndex].showStartingCity = false;
    },
    onConfirmEndingCity(values){
      this.travelList[this.itemIndex].endingCity = values.map((item) => item.name).join('/');
      this.travelList[this.itemIndex].showEndingCity = false;
    },

    onConfirmVehicles(value){
      this.travelList[this.itemIndex].vehicle = value;
      // this.$set(this.form[this.popupIndex],'transportation',value)
      this.form[this.popupIndex].transportation = value
      // console.log('onConfirmVehicles-form',this.form[this.popupIndex])
      this.showVehicles = false;
    },
    onConfirmRoundTrips(value){
      console.log(value)
      this.travelList[this.itemIndex].roundTrip = value;
      this.showRoundTrips = false;
    },
    addItem(i){
      console.log('i',i,this.form[i])
      this.travelList.push(
        {
          currentTimeStart10: '',
          currentTimeEnd10: '',
          computedDay10:'',
          startingCity:"",
          startingCityId:"",
          endingCity:"",
          endingCityId:"",
          vehicle:'',//交通工具
          vehicles:['飞机', '火车', '汽车', '其他'],//交通工具
          roundTrip:'',//往返
          roundTrips:['单程', '往返'],//往返
          reason10:'',
          is_time_update:this.travelDateType
        },
      )
      // this.$forceUpdate()
      console.log(this.travelList)
    },
    sub(index,i){
      console.log(index,i,this.form[i])
      this.travelList.splice(index,1)
      // this.$forceUpdate()
      console.log(this.travelList)
    },
    // scrollEvent(e){
    //   let a=this.$refs.scrollBox.scrollTop
    //   let b=this.$refs.scrollBox.clientHeight
    //   console.log(this.$refs.scrollBox,e,a,b)
    // }
    delContactItem(index,idx){
      console.log('delContactItem',index,idx)
      this.form[index].values.splice(idx,1)
      let names=this.form[index].names.split(',')
      names.splice(idx,1)
      this.form[index].names=names.join(',')
      // console.log('delContactItem1',this.form[index])
    },
    toDetail(){
      if(this.isAndroid){
        window.android.showApproveList();       
      }else if(this.isIOS){
        console.log('调用showApproveList')
        window.webkit.messageHandlers.showApproveList.postMessage(null);
      }
    },
    tijiao(){
      this.showToast('tijiao')
      return false
    },
  },
};

</script>
<style lang="scss" scoped>
.container{
    background-color: #f5f5f5;
    padding-bottom: 80px;
    box-sizing: border-box;
    min-height: 100vh;
    font-size:14px!important;
    color:#333!important; 
    font-family:PingFang SC!important;
    // height: auto;
    .items{
      .item{
        height: 50px;
        background-color: #fff;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        &.none{
          height:30px;
          background-color: #f5f5f5;
        }
        &.mb0{
          margin-bottom: 0;
          background-color: #fff;
        }
        &.more{
          min-height:140px;
        }
        
      }
      .lianxi{
        background-color:#fff;
        margin-bottom: 8px;
        .ul{
          display:flex;
          flex-wrap: wrap;
          padding: 0 15px;
          .li{
            width:18%;
            height:80px;
            display:flex;
            .left{
                flex:1;
                position: relative;
                .img{
                    width:50px;
                    height:50px;
                    border-radius:50%;
                    display:inline-block;
                    &.add{
                      background-color:#f5f5f5;
                      display:flex;
                      justify-content: center;
                      align-items: center;
                    }
                }
                .name{
                  text-align:center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  // width: 50px;
                }
                .closed{
                    position: absolute;
                    right:2px;
                    top:0;
                    border:1px solid #999;
                    border-radius:50%;
                }
            }
            .right{
                width:30px;
                padding-top:12px;
                &.none{
                  visibility: hidden;
                }
            }
             
          }
        }
      }
      .poupList{
        .radioGroup{
          max-height:70%;
          text-align:left;
          padding-top: 50px;
          // position: absolute;
          overflow-y: hidden;
          left: 0;
          bottom: 0;
          box-sizing:border-box;
          &.checkBox1{
            padding-bottom: 50px;
          }
          // &.guding{
          //   .radioTitle{
          //     position: fixed!important;
          //     background-color: #fff;
          //     z-index: 10000;
          //     top:200px!important;
          //   }
          // }
          .radioTitle{
            position: absolute;
            top:0px;
            left:0;
            padding-left:16px;
            width: 100%;
            text-align:left;
            // padding-left:16px;
            box-sizing:border-box;
            height:50px;
            line-height:50px;
            border-bottom:1px solid #F8F8FA;
            // &.guding{
            //   position: fixed!important;
            //   background-color: #fff;
            //   z-index: 10000;
            //   top:200px!important;
            // }
          }
          .scrollBox{
            height:300px;
            overflow-y: auto;
          }
          .guding{
            position: fixed!important;
            background-color: #fff;
            z-index: 10000;
            top:200px!important;
            padding-left:16px;
            width: 100%;
            text-align:left;
            box-sizing:border-box;
            height:50px;
            line-height:50px;
            border-bottom:1px solid #F8F8FA;
          }
          .bottom{
            position: fixed;
            bottom:0;
            left:0;
            z-index: 10001;
            width: 100%;
            height:45px;
            margin-bottom:10px;
            display:flex;
            .li{
              flex:1;
              
              .btn{
                display:flex;
                justify-content: center;
                align-items: center;
                height:45px;
                width:90%;
                margin-left:8%;
                // margin:0 auto;
                border-radius:5px;
                background-color:#fff;
                box-sizing: border-box;
                border:1px solid #2A5AFF;
                color:#2A5AFF;
                &.queding{
                  margin-left:2%;
                  background-color:#2A5AFF;
                  border:1px solid #2A5AFF;
                  color:#FFF;
                }
              }
            }
          }
          .moreDiv{
            max-height: 50%;
            overflow-y: auto;
            // display: block;
          }
        }
      }
      .approvalProcessList{
        .approvalProcessTitle{
          text-align: left;
          padding:5px 15px;
          background-color: #fff;
          font-weight: bold;
        }
        .itemProcess1{
          padding: 0 15px;
          box-sizing:border-box;
          background-color:#fff;
          .item-title{
              text-align:left;
              height:40px;
              line-height:40px;
          }
          .item-title2{
            margin-left: -10px;
          }
          .ul{
              display:flex;
              flex-wrap: wrap;
              .li{
                  width:25%;
                  height:80px;
                  display:flex;
                  .left{
                      flex:1;
                      position: relative;
                      .img{
                          width:50px;
                          height:50px;
                          border-radius:50%;
                          display:inline-block;
                          &.add{
                            background-color:#f5f5f5;
                            display:flex;
                            justify-content: center;
                            align-items: center;
                          }
                      }
                      .name{
                        text-align:center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 50px;
                      }
                      .closed{
                          position: absolute;
                          right:0;
                          top:0;
                          border:1px solid #999;
                          border-radius:50%;
                      }
                  }
                  .right{
                     width:30px;
                     padding-top:12px;
                     &.none{
                       visibility: hidden;
                     }
                  }
                  
              }
          }
        }
        .itemProcess2{
          padding: 0 15px;
          box-sizing:border-box;
          background-color:#fff;
          text-align: left;
          height:40px;
          line-height:40px;
        }
      }
      .approvalProcessList1{
        background-color: #fff;
        margin-bottom: 20px;
        .approvalProcessTitle1{
          height: 50px;
          line-height: 50px;
          background-color: #f5f5f5;
          text-indent: 15px;
          font-weight: bold;
          text-align: left;
          font-size: 16px;
        }
        .itemOne{
          padding: 10px 20px 15px;
          box-sizing: border-box;
          // .left{
            
          // }
          .right{
            text-align: left;
            .rightTitle{
              padding-left: 20px;
              box-sizing: border-box;
              font-weight: bold;
              font-size: 16px;
              height: 30px;
              line-height: 30px;
              // display: flex;
              // align-items: center;
              .circle{
                width: 10px;
                height: 10px;
                border-radius: 10px;
                display: inline-block;
                margin-left: -24px;
                margin-right: 10px;
                background-color: #2A5AFF;
                .red{
                  background-color: red;
                }
              }
              .star{
                margin-left: -6px;
                color: red;
                // height: 30px;
                // line-height: 30px;
                vertical-align: middle;
              }
            }
            .box{
              padding-left: 20px;
              box-sizing: border-box;
              border-left: 2px dashed #333;
              // .line{
              //   height: 100%;
              //   width: 2px;
              //   border-left: 1px dashed #000;
              //   display: inline-block;
              //   margin-left: -20px;
              // }
              .itemTitle{
                height: 20px;
                line-height: 20px;
                span{

                }
                .icon{
                  transform: rotate(-90deg);
                }
              }
              .ul{
                height: auto;
                // max-height: 40px;
                overflow: hidden;
                padding-top: 6px;
                padding-bottom: 6px;
                box-sizing: border-box;
                .li{
                  height: 30px;
                  line-height: 30px;
                  border-radius: 30px;
                  padding: 0 10px;
                  margin-bottom: 10px;
                  background-color: #EBECED;
                  // display: flex;
                  // align-items: center;
                  // display: inline-block;
                  float: left;
                  position: relative;
                  margin-right: 6px;
                  img{
                    width: 24px;
                    height: 24px;
                    display: inline-block;
                    border-radius: 50%;
                    margin-right: 6px;
                    // margin-top: 4px;
                    vertical-align: middle;
                  }
                  .name{
                    display: inline;
                    line-height: 30px;
                    // vertical-align: middle;
                  }
                  .closed{
                    position: absolute;
                    right: -4px;
                    top: -6px;
                  } 
                  .arrow{
                    position: absolute;
                    transform: rotate(-90deg);
                    // margin-top: 4px;
                    right: -20px;
                    top: 4px;
                  }
                  &.mr24{
                    margin-right: 24px;
                  }
                  &.mr24.lastarrow{
                    margin-right: 6px;
                    .arrow{
                      display: none;
                    }
                  }
                }
                .add{
                  float: left;
                  &.arrow{
                    transform: rotate(-90deg);
                    margin-top: 4px;
                  }
                }
              }
              &.togger{
                .itemTitle{
                  .icon{
                    transform: rotate(90deg);
                  }
                }
                .ul{
                  display: none;
                }
              }
            }
          }
          .right:last-child{
            .box{
              border-left: none;
            }
          }
        }
      }
      .btn_box{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 70px;
        background-color: #F8F8FA;
        border-top: 1px solid #ccc;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .left{
          width: 50px;
          margin-right: 20px;
          img{
            width: 24px;
            height: 24px;
            display: block;
            margin:0 auto;
            margin-bottom: 6px;
          }
          .name{
            font-size: 12px;
            color:#2A5AFF;
          }
        }
        .right{
          height: 50px;
          border-radius: 8px;
          flex: 1;
          background-color: #2A5AFF;
          display: flex;
          justify-content: center;
          align-items: center;
          color:#fff;
          font-size: 16px;
        }
      }
    }

      // /deep/ .van-popup{
      //   background-color: #ccc;
      // }
    
    .moreText{
      background-color:#fff;
      margin-bottom: 8px;
      .title{
        height:40px;
      }
      .more{
        width:100%;
        border:none;
        height:100px;
        padding:0 15px;
        box-sizing:border-box;
      }
    }
    .mb20{
      margin-bottom: 8px;
      background-color: #fff;
      padding: 10px 16px;
      box-sizing: border-box;
      font-size: 14px;
      .title{
        display: flex;
        height: 30px;
        align-items: center;
      }
      .checkBox{
        width: 30%;
        margin-bottom: 8px;
        margin-right: 0;
      }
      .left{
        left:0;
      }
    }
    /deep/ .van-cell::after{
      border-bottom:none;
    }
    .timeBox{
      margin-bottom: 8px;
      background-color: #fff;
      /deep/ .borderBottom.van-cell::after{
          border-bottom:1px solid #E9E9E9 !important;
      }
      &.table{
        padding: 0 15px;
        box-sizing: border-box;
        .tableTitle{
          font-size: 12px;
          text-align: left;
          line-height: 30px;
          color:#999;
        }
        // tbody{
          tr{
            height: 30px;
            line-height: 30px;
          // .tableItem{
            display: flex;
            // justify-content: center;
            // align-items: center;
            td{
              flex: 1;
              &.ipt /deep/ .van-cell{
                padding: 0;
                max-height: 100%;
                // text-align: center;
              }
            }
          }
        // }
        
      }
    }
    .mb0{
      margin-bottom:0;
    }
    /deep/ .van-field__label{
      width:100px;
    }
    /deep/ .van-picker__cancel{
        color: #AAAAAA;
    }
    /deep/ .van-picker__confirm{
        color: #2A5AFF;
    }
    /deep/ .van-picker__toolbar{
      border-bottom:1px solid #F8F8FA;
    }
    /deep/ .van-picker__frame{
      border-top:1px solid #F8F8FA;
      border-bottom:1px solid #F8F8FA;
    }
    
    .addItem{
      height:30px!important;
      justify-content: center;
      color:#6b96ff;
      
    }
    .travel /deep/ .van-field__label{
      width:120px;
    }
    .travel{
      .timeBox{
        position: relative;
        border-top:1px solid #f5f5f5;
        border-bottom:1px solid #f5f5f5;
        .itemClose{
          position: absolute;
          right:5px;
          top:5px;
        }
      }
    }
}
</style>